AJAX - группа технологий, которая используется в веб разработке для создания интерактивных приложений. AJAX позволяет передавать данные с сервера без перезагрузки страницы. Таким образом можно получать очень впечатляющие результаты. А библиотека jQuery существенно облегчает реализацию AJAX с помощью встроенных методов.
Для реализации технологии используется метод $.ajax или jQuery.ajax :
$.ajax(свойства) или $.ajax(url [, свойства])
Второй параметр был добавлен в версии 1.5 jQuery.
url - адрес запрашиваемой страницы;
properties - свойства запроса.
Полный список параметров приведен в документации jQuery.
В уроке мы используем несколько наиболее часто используемых параметров.
success (функция) - данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.
data (объект/строка) - пользовательские данные, которые передаются на запрашиваемую страницу.
dataType (строка) - возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.
type (строка) - тип запроса. Возможные значения: GET или POST. По умолчанию: GET.
url (строка) - адрес URL для запроса.
Пример 1Простая передача текста.
$.ajax({ url: "response.php?action=sample1", success: function(data) { $(".results").html(data); } });
Для ответа имеется элемент div .result .
Ждем ответа
Сервер просто возвращает строку:
Echo "Пример 1 - передача завершилась успешно";
Пример 2Передаем пользовательские данные PHP скрипту.
$.ajax({ type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data){ $(".results").html(data); } });
Сервер возвращает строку со вставленными в нее переданными данными:
Echo "Пример 2 - передача завершилась успешно. Параметры: name = " . $_POST["name"] . ", nickname= " . $_POST["nickname"];
Пример 3Передача и выполнение кода JavaScript
$.ajax({ dataType: "script", url: "response.php?action=sample3", })
Сервер выполняет код:
Echo "$(".results").html("Пример 3 - Выполнение JavaScript");";
Пример 4Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.
$.ajax({ dataType: "xml", url: "response.php?action=sample4", success: function(xmldata){ $(".results").html(""); $(xmldata).find("item").each(function(){ $(" ").html($(this).text()).appendTo(".results"); }); } });
Сервер должен возвращать XML код:
Header ("Content-Type: application/xml; charset=UTF-8"); echo true); // если $data не указан $response = array("success" => true, "data" => $data); // если $data указан
Использование wp_send_json_success($data, $status_code); $data(строка/массив/число/объект/логический) Данные, которые будут добавлены в результат в элемент массива data, перед кодирование в JSON.По умолчанию: нет $status_code(число) HTTP статус код, который нужно установить. Какие бывают статус коды, . C WP 4.7.
По умолчанию: null Примеры #1 Определение успешной обработки AJAX запроса
Этот jQuery код отправляет AJAX запрос в файл плагина ajax/save_field.php:
JQuery(document).ready(function($){ $("#btn_save").click(function(e){ e.preventDefault(); $.post(pluginUrl + "ajax/save_field.php", $("#my-form").serialize(), function(json){ if(json.success) alert(json.data.message); else alert("Error" + json.data); }); }); });
Это код файла save_field.php , который обрабатывает переданный запрос. Здесь показано, как использовать wp_send_json_success() :