Ajax: Полный контроль — Урок 4 (отправка и получение данных)

Этот урок посвящен практическому применению 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 для отправки и получения данных. Этот подход можно расширить для работы с базами данных и сложными сценариями. Это лишь базовый пример.

Что будем искать? Например,программа