Этот урок посвящен практическому применению Ajax для отправки и получения данных. Мы создадим простую форму, позволяющую управлять всеми параметрами процесса. Фокус будет на базовом функционале.
Подготовка
Создайте на вашем сайте директорию мой_сайт, внутри неё — поддиректорию www. После создания www, перезапустите сервер и перейдите в неё. Здесь будут храниться необходимые файлы.
HTML-структура
Создайте в директории www файл index.html со следующим кодом:
<!DOCTYPE html>
<html>
<head>
<title>Ajax урок 4</title>
</head>
<body>
<p id="load" style="cursor: pointer;">Загрузить данные</p>
<div id="inform"></div>
</body>
</html>
В коде создан абзац с id load (курсор меняется при наведении) и div с id inform для вывода данных. Для взаимодействия с элементами можно использовать их ID, теги или другие селекторы.
JavaScript: функция «Полный контроль»
Создадим JavaScript-код (выполняется после загрузки страницы):
$(document).ready(function() {
$("#load").bind("click", function() {
$.ajax({
url: "content.php",
type: "POST",
data: { name: "admin", numb: 5 },
dataType: "html",
beforeSend: beforeSend,
success: success
});
});
});
Используется библиотека jQuery. Параметры функции $.ajax:
- url: "content.php": Путь к файлу, обрабатывающему данные.
- type: "POST": Метод отправки данных (POST, возможен GET).
- data: { name: "admin", numb: 5 }: Данные в виде объекта (строки, числа и др.).
- dataType: "html": Ожидаемый тип данных (HTML).
- beforeSend: beforeSend: Функция, выполняемая перед отправкой запроса.
- success: success: Функция, выполняемая после успешного получения ответа.
Функции beforeSend и success
Функции beforeSend и success:
function beforeSend() {
$("#inform").html("Ожидание данных...");
}
function success(data) {
$("#inform").html(data);
}
beforeSend выводит сообщение «Ожидание данных…» в блок inform. success выводит полученные данные в этот же блок.
Файл content.php
Создайте файл content.php в директории www:
<?php
echo "Данные: строка " . $_POST["name"] . ", цифра " . $_POST["numb"];
?>
Этот код обрабатывает POST-запрос, получает и выводит данные.
Задержка
Для демонстрации загрузки добавим искусственную задержку:
function beforeSend() {
$("#inform").html("Ожидание данных...");
sleep(2000); // Задержка на 2 секунды
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
Функция sleep создает задержку в 2 секунды. (Замечание: это не самый эффективный способ создания задержки, лучше использовать setTimeout.)
Подключение jQuery
Подключите jQuery к index.html:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
В этом уроке мы создали простую форму, использующую Ajax для отправки и получения данных. Этот подход можно расширить для работы с базами данных и сложными сценариями. Это лишь базовый пример.