Русский

Учебник по PHP

Операторы PHP

Управляющие语句 PHP

Массивы PHP

Функции PHP

Суперглобальные переменные PHP

Работа с файлами PHP

Объектно-ориентированный PHP

Веб-разработка на PHP

PHP AJAX

PHP XML

Пример входа в PHP

PHP продвинутый

PHP - AJAX Search: A Beginner's Guide

Здравствуйте, будущие маги PHP! Я рад приветствовать вас в увлекательном путешествии в мир функциональности поиска с использованием AJAX и PHP. Как кто-то, кто уже давно teaches программирование, я с нетерпением жду возможности поделиться этими знаниями с вами. Так что натянем рукава и окунемся в это дело с головой!

PHP - AJAX Search

Что такое AJAX Search?

Прежде чем мы начнем программировать, давайте поймем, что такое AJAX搜索. Представьте, что вы находитесь в огромной библиотеке и ищете книгу. Вместо того чтобы бегать по всем полкам, не было бы замечательно, если бы вы могли ввести имя книги, и результаты instantly appeared? Именно то, что делает AJAX搜索 для веб-сайтов!

AJAX означает Asynchronous JavaScript and XML. Не волнуйтесь, если это звучит сложно - к концу этого руководства вы будете использовать его как профессионал!

Шаг 1: Настройка нашего проекта

Давайте начнем с создания файлов, которые нам понадобятся для нашего проекта. Нам понадобятся три файла:

  1. index.html (наша основная страница с полем поиска)
  2. search.php (наш PHP-скрипт, который будет обрабатывать搜索)
  3. script.js (наш JavaScript-файл для отправки AJAX-запроса)

Создание index.html

Сначала создадим наш HTML-файл с простым полем поиска:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример AJAX Search</title>
</head>
<body>
<h1>AJAX Search</h1>
<input type="text" id="searchBox" placeholder="Search...">
<div id="results"></div>

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

В этом файле мы создали простое поле поиска и div для отображения наших результатов. Мы также включили jQuery, чтобы упростить наши AJAX-запросы, и включили наш файл script.js.

Шаг 2: Создание нашего PHP-скрипта для поиска

Теперь создадим наш файл search.php. Это будет бэкенд нашей функции поиска:

<?php
// Симуляция базы данных с помощью массива
$fruits = array("Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape");

// Получение搜索 термина из AJAX запроса
$searchTerm = $_GET['term'];

// Фильтрация массива фруктов на основе搜索 термина
$results = array_filter($fruits, function($fruit) use ($searchTerm) {
return stripos($fruit, $searchTerm) !== false;
});

// Возврат результатов в формате JSON
echo json_encode(array_values($results));

Давайте разберем это:

  1. Мы создаем простой массив фруктов для имитации базы данных.
  2. Мы получаем搜索 термин из GET запроса (отправленного нашим AJAX-запросом).
  3. Мы используем array_filter для поиска фруктов, соответствующих нашему搜索 термину.
  4. Наконец, мы возвращаем результаты в формате JSON, что легко обрабатывать JavaScript.

Шаг 3: Создание нашего JavaScript-файла

Теперь для интересной части - давайте создадим наш файл script.js, чтобы сделать 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('');
}
});
});

Давайте разберем это шаг за шагом:

  1. Мы ждем, когда документ будет готов.
  2. Мы слушаем 'keyup' событрия в нашем поле поиска.
  3. Если длина搜索 термина больше 1 символа, мы делаем AJAX запрос.
  4. Мы отправляем搜索 термин в наш PHP-скрипт.
  5. Когда мы получаем результаты обратно, мы форматируем их как HTML и отображаем.

И вот у вас есть полностью функциональная система AJAX搜索 в трех файлах.

Объединение всех частей

Теперь, когда у нас есть все части, давайте посмотрим, как они работают вместе:

  1. Когда вы вводите текст в поле поиска, JavaScript detect событрия 'keyup'.
  2. Если вы ввели больше одного символа, он отправляет AJAX запрос к search.php.
  3. search.php принимает ваш搜索 термин, находит соответствующие фрукты и возвращает их в формате JSON.
  4. JavaScript принимает этот JSON, форматирует его как HTML и отображает на странице.

Все это происходит instantly, без необходимости перезагружать страницу. Отлично, правда?

Заключение

Поздравляю! Вы только что создали свою первую систему AJAX搜索. Это только начало - вы можете расширить это для поиска реальных баз данных, добавить более сложные фильтры или даже реализовать функцию автозаполнения.

Remember, ключ к maîtrising программирование - это практика. Попробуйте изменить этот код, добавьте свои функции и, самое главное, получайте удовольствие от этого!

Вот таблица, резюмирующая методы, которые мы использовали в этом руководстве:

Метод Описание
$.ajax() jQuery метод для выполнения AJAX запроса
array_filter() PHP функция для фильтрации элементов массива с помощью回调 функции
json_encode() PHP функция для преобразования PHP массива в строку JSON
$.each() jQuery метод для итерации по массиву или объекту

Продолжайте программировать, продолжайте учиться, и скоро вы будете создавать потрясающие веб-приложения. До свидания, счастливого кодирования!

Credits: Image by storyset

Предыдущий учебник:
PHP - Введение в AJAX
Следующий учебник:
PHP - Анализатор XML AJAX