Tiếng Việt

Hướng dẫn PHP

Operator PHP

Câu lệnh điều khiển PHP

Mảng PHP

Hàm PHP

Superglobals PHP

Quản lý tệp PHP

PHP Hướng đối tượng

Phát triển Web PHP

PHP AJAX

PHP XML

Ví dụ đăng nhập PHP

PHP Nâng cao

PHP - Tìm Kiếm AJAX: Hướng Dẫn Dành Cho Người Mới Bắt Đầu

Xin chào các pháp sư PHP tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của tính năng tìm kiếm được hỗ trợ bởi AJAX sử dụng PHP. Như một ai đó đã dạy lập trình trong nhiều năm, tôi không thể đợi để chia sẻ kiến thức này với các bạn. Vậy, hãy c rolled lên tay áo và cùng nhau nhảy vào nào!

PHP - AJAX Search

Tìm Kiếm AJAX Là Gì?

Trước khi chúng ta bắt đầu viết mã, hãy hiểu rõ tìm kiếm AJAX là gì. Hãy tưởng tượng bạn đang ở một thư viện lớn, tìm một cuốn sách. Thay vì chạy lòng vòng kiểm tra từng kệ sách, liệu có phải sẽ tuyệt vời nếu bạn có thể gõ tên cuốn sách và ngay lập tức thấy kết quả xuất hiện? Đó chính xác là điều mà tìm kiếm AJAX làm cho các trang web!

AJAX là viết tắt của Asynchronous JavaScript and XML. Đừng lo nếu điều này听起来 phức tạp - vào cuối bài hướng dẫn này, bạn sẽ sử dụng nó như một chuyên gia!

Bước 1: Thiết lập Dự Án

Hãy bắt đầu bằng cách tạo các tệp chúng ta sẽ cần cho dự án. Chúng ta sẽ cần ba tệp:

  1. index.html (trang chính của chúng ta với hộp tìm kiếm)
  2. search.php (script PHP của chúng ta để xử lý tìm kiếm)
  3. script.js (tệp JavaScript của chúng ta để thực hiện yêu cầu AJAX)

Tạo index.html

Đầu tiên, hãy tạo tệp HTML của chúng ta với một hộp tìm kiếm đơn giản:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title Ví dụ Tìm Kiếm AJAX</title>
</head>
<body>
<h1>Tìm Kiếm AJAX</h1>
<input type="text" id="searchBox" placeholder="Tìm kiếm...">
<div id="results"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Trong tệp này, chúng ta đã tạo một hộp tìm kiếm đơn giản và một div để hiển thị kết quả. Chúng ta cũng đã bao gồm jQuery để làm cho các yêu cầu AJAX dễ dàng hơn, và liên kết tệp script.js của chúng ta.

Bước 2: Tạo Script Tìm Kiếm PHP

Bây giờ, hãy tạo tệp search.php của chúng ta. Đây sẽ là backend của tính năng tìm kiếm của chúng ta:

<?php
// Simulating a database with an array
$fruits = array("Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape");

// Get the search term from the AJAX request
$searchTerm = $_GET['term'];

// Filter the fruits array based on the search term
$results = array_filter($fruits, function($fruit) use ($searchTerm) {
return stripos($fruit, $searchTerm) !== false;
});

// Return the results as JSON
echo json_encode(array_values($results));

Hãy phân tích này:

  1. Chúng ta tạo một mảng đơn giản của quả để mô phỏng một cơ sở dữ liệu.
  2. Chúng ta lấy từ khóa tìm kiếm từ yêu cầu GET (gửi bởi yêu cầu AJAX của chúng ta).
  3. Chúng ta sử dụng array_filter để tìm quả phù hợp với từ khóa tìm kiếm.
  4. Cuối cùng, chúng ta trả về kết quả dưới dạng JSON, điều này dễ dàng cho JavaScript làm việc với.

Bước 3: Tạo Tệp JavaScript

Bây giờ, hãy tạo tệp script.js của chúng ta để thực hiện phép màu AJAX!

$(document).ready(function() {
$('#searchBox').on('keyup', function() {
var searchTerm = $(this).val();
if(searchTerm.length > 1) {
$.ajax({
url: 'search.php',
type: 'GET',
data: {term: searchTerm},
dataType: 'json',
success: function(data) {
var results = '';
$.each(data, function(index, value) {
results += '<p>' + value + '</p>';
});
$('#results').html(results);
}
});
} else {
$('#results').html('');
}
});
});

Hãy phân tích này từng bước:

  1. Chúng ta chờ đợi tài liệu sẵn sàng.
  2. Chúng ta lắng nghe sự kiện 'keyup' trên hộp tìm kiếm.
  3. Nếu từ khóa tìm kiếm dài hơn 1 ký tự, chúng ta thực hiện một yêu cầu AJAX.
  4. Chúng ta gửi từ khóa tìm kiếm đến script PHP của chúng ta.
  5. Khi chúng ta nhận được kết quả, chúng ta định dạng chúng dưới dạng HTML và hiển thị chúng.

Và thế là xong! Bạn đã có một hệ thống tìm kiếm AJAX hoàn chỉnh chỉ trong ba tệp.

Kết Hợp Tất Cả

Bây giờ chúng ta có tất cả các mảnh, hãy xem chúng hoạt động cùng nhau:

  1. Khi bạn gõ vào hộp tìm kiếm, JavaScript phát hiện sự kiện 'keyup'.
  2. Nếu bạn đã gõ hơn một ký tự, nó gửi một yêu cầu AJAX đến search.php.
  3. search.php lấy từ khóa tìm kiếm của bạn, tìm quả phù hợp, và trả về chúng dưới dạng JSON.
  4. JavaScript nhận JSON này, định dạng nó dưới dạng HTML, và hiển thị nó trên trang.

Tất cả những điều này xảy ra ngay lập tức, mà không cần tải lại trang. Thật tuyệt vời phải không?

Kết Luận

Chúc mừng! Bạn vừa xây dựng thành công hệ thống tìm kiếm AJAX đầu tiên của mình. Đây chỉ là bắt đầu - bạn có thể mở rộng nó để tìm kiếm cơ sở dữ liệu thực tế, thêm bộ lọc phức tạp hơn, hoặc thậm chí là triển khai tính năng tự động hoàn thành.

Nhớ rằng, chìa khóa để thành thạo lập trình là thực hành. Thử thay đổi mã này, thêm các tính năng của riêng bạn, và quan trọng nhất, hãy vui vẻ với nó!

Dưới đây là bảng tóm tắt các phương thức chúng ta đã sử dụng trong bài hướng dẫn này:

Phương Thức Mô Tả
$.ajax() Phương thức jQuery để thực hiện một yêu cầu AJAX
array_filter() Hàm PHP để lọc các phần tử của một mảng sử dụng một hàm callback
json_encode() Hàm PHP để chuyển đổi một mảng PHP thành một chuỗi JSON
$.each() Phương thức jQuery để duyệt qua một mảng hoặc đối tượng

Tiếp tục lập trình, tiếp tục học hỏi, và trước khi bạn nhận ra, bạn sẽ tạo ra các ứng dụng web tuyệt vời. Đến gặp lại lần sau, chúc bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:
PHP - Giới thiệu về AJAX
Hướng Dẫn Tiếp Theo:
PHP - Phân tích cú pháp XML AJAX