Простой пример использования PHP и AJAX. Простой пример использования PHP и AJAX Отправка изображения или файла ajax-запросом через jQuery
В эпоху современного веба, большинство сайтов становятся все более интерактивными. Если ранее для получения обновленных данных нам нужно было обновить полностью страницу, то сейчас появились технологии которые позволяют полностью страницу не загружать, а только лишь отдельную ее часть. В свою очередь это предоставляет удобство как пользователям так и владельцам серверов, ведь для пользователя загрузка страницы будет быстрее, так как загружается только отдельная часть страницы, а серверу не нужно каждый раз генерировать страницу и отдавать ее пользователю. Эти возможности просто реализовать при помощи php и ajax.
Сегодня мы разберем небольшой пример для лучшего понимания работы концепции AJAX . Иногда новичкам бывает трудно понять каким же образом взаимодействует между собой php и ajax, много людей ищут примеры того как валидировать формы на лету без перезагрузки всей страницы. Я вам вкратце покажу как это делается, для того, чтобы вы могли понять основы и принципы которые позволят вам в будущем более быстро освоить другие инструменты и писать свои собственные скрипты.
Придумаем небольшое задание себе, будем проверять наличие email адреса в базе данных без перезагрузки страницы используя php и ajax. Такой пример хорошо продемонстрирует как мы можем взаимодействовать с сервером без перезагрузки страницы в браузере, а также, это часто используется при различного рода валидациях пользовательских форм. В корневом каталоге создадим 3 файла с именами index.php , email.php , validate.js .
Создание страницыСоздадим простую страницу с одной формой, которая содержит только одно поле для ввода email.
Синтаксис файла index.php
AJAX Tutorial
Самый простой способ работать с AJAX — это подключить фреймворк jQuery , что собственно я и сделал. jQuery предоставляет нам простой в понимании и работе синтаксис для отправки AJAX запросов, почему бы не использовать это преимущество?
Создание js скриптаСинтаксис файла validate.js
$(document).ready(function(){ var email = ""; $("#email").keyup(function(){ var value = $(this).val(); $.ajax({ type:"POST", url:"email.php", data:"email="+value, success:function(msg){ if(msg == "valid"){ $("#message").html("Этот Email можно использовать.Этот Email уже занят."); } } }); }); $("#submit").click(function(){ if(email == ""){ alert("Please, put data to all email"); }else{ $.ajax({ type: "POST", url:"email.php", data:"add_email="+email, success:function(msg){ $("#message").html(msg); } }); } }); });
Обработчик на phpЭтот скрипт будет получать POST
запрос от клиента, обрабатывать его и возвращать результат. AJAX
считывает результат и на его основе принимает решение.
Синтаксис файла email.php
$connection = mysqli_connect("localhost","email","email","email"); if(isset($_POST["email"]) && $_POST["email"] != ""){ $email = $_POST["email"]; $email = mysqli_real_escape_string($connection,$email); if(!filter_var($email, FILTER_VALIDATE_EMAIL)){ echo "invalid"; }else{ $sql = "SELECT id FROM email WHERE email="$email""; $result = mysqli_query($connection,$sql); if(mysqli_num_rows($result) == 1){ echo "invalid"; }else{ echo "valid"; } } } if(isset($_POST["add_email"]) && $_POST["add_email"] != ""){ $email = mysqli_real_escape_string($connection,$_POST["add_email"]); $sql = "INSERT INTO email(email) VALUES("$email")"; if(mysqli_query($connection,$sql)){ echo Success"; }else{ echo "Error"; } }
В нашем php скрипте, самый обычный код, который обрабатывает post запрос и печатает на странице определенный текст. В результате AJAX отправляет запрос php скрипту, скрипт его обрабатывает и выдает результат, AJAX считывает результат и изменяет страницу в реальном времени.
AJAX передает POST запрос скрипту посредством этого участка кода:
$.ajax({ type:"POST", url:"email.php", data:"email="+value, success:function(msg){ if(msg == "valid"){ $("#message").html("Этот Email можно использовать. "); email = value; }else{ $("#message").html("Этот Email уже занят. "); } } });
type - Тип запроса, POST или GET. В нашем случае POST;
url - адрес скрипта которому отправляют запрос;
data - данные которые передаются в запросе;
success - что делать в результате успешного выполнения запроса. В нашем случае вызывается функция;
В самом скрипте, проверка наличия email в базе выполняется при каждом вводе символа в поле email. В скрипте за обработку ввода отвечает участок $("#email").keyup(function(){}); , который проверяет нажатие клавиши в поле с id = "email" .
Как видите, код довольно простой и не требует особо больших навыков для понимания, все завязано на обработке событий keyup() - нажатие клавиши, click() - клик мышкой по элементу. Далее следует AJAX
запрос и ответ от скрипта. Таким образом используя php и ajax можно можно получить практически безграничные возможности для создания интерактивных страниц.
Данный код не претендует на звание высококачественного, но если развить, добавить правильных валидаций на уровне клиента и сервера, ввести css, то вполне можно использовать в своих проектах.
Если у вас возникли вопросы, не стесняйтесь, пишите комментарии.
Желаю вам хорошего дня и до скорых встреч 🙂
В этой статье примеры кода, которые я использую, для отправки ajax-запросов к серверу через jQuery. Их задачи могут быть разными, поэтому под них можно использовать разные функции, которые упрощают написание кода.
Запрос html-данных с помощью функции LoadЭто самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с id="result" (содержимое элемента заменяется):
$("#result").load("");
Более продвинутый вариант использования load:
$("#result").load("", {par1:val1, par2:val2, ...}, function(response, status, xhr) { if (status == "success") { alert("Готово"); } else { alert("Ошибка: " + xhr.status + " " + xhr.statusText); } });
В этом примере серверу так же передаются параметры, а после получения ответа проверяется не было ли ошибки (например, ответ от сервера не был получен) и выполнение различных действий.
Ajax-запросы функциями GET и POSTЭти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.
$.get("", // адрес отправки запроса {par1:val1, par2:val2, ...}, // передача с запросом каких-нибудь данных function(data) { // какие-то действия с полученными от сервера данными data });
Передача данных не обязательна, как и выполнение каких-либо действий после получения ответа от сервера, т.е. в этом случае, строчки 3 и 4-6 можно удалить при необходимости и таким образом еще сократить код.
Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) - по-умолчанию определяется автоматически.
Использование post аналогично, но в следующем примере использую вызов функции после получения ответа от сервера.
$.post("", {par1:val1, par2:val2, ...}, onSuccess); function onSuccess(data) { // какие-то действия с полученными от сервера данными data }
На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.
Получение json-данных с помощью getJSONgetJSON - укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.
$.getJSON("", {par1:val1, par2:val2, ...}).success(function(data) { // что-то делаем с данными, например, обходим их в цикле и выводим: for (var i=0; i 10, "text" => "тестовая строка 1"); $arr = array("id" => 20, "text" => "тестовая строка 2"); $arr = array("id" => 30, "text" => "тестовая строка 3"); echo json_encode($arr);
Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.
Простой ajax-запрос через jQuery с помощью функции AJAXТеперь приведу пример простого get запроса функцией ajax и получением html-данных.
$.ajax({ url: "", dataType: "html", success: function(data) { // какие-то действия с полученными данными data } });
Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.
Более сложный пример ajax-запроса через jQueryПример выполнения запроса функцией ajax с передачей данных post методом и обработкой событий. Ниже опишу дополнительные параметры, которые чаще всего применяются.
$.ajax({ url: "", type: "post", data: "", // можно строкой, а можно, например, так: $("input, input:checked, input:checked, select, textarea") dataType: "json", beforeSend: function() { $("#sendajax").button("loading"); }, complete: function() { $("#sendajax").button("reset"); }, success: function(json) { // какие-то действия с полученными данными }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } });
Кнопка отправки данных:
Отправить
В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на "Отправка..." и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на "Отправить", становится активной). Ответ получается в виде json-данных.
Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:
| url | Адрес отправки ajax-запроса |
| type | Способ отправки запроса GET или POST |
| data | Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&..., объект jQuery, например, $("input") или другие данные. |
| dataType | Тип получаемых от сервера данных. Может быть html, json, text, script и xml. |
| cache | Кэширование браузером запроса (false - не кэшировать). |
| async | Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера. |
| processData | Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных. |
| contentType | Тип передаваемых данных, по умолчанию "application/x-www-form-urlencoded; charset=UTF-8". Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер. |
| beforeSend | Функция, выполняемая перед отправкой ajax-запроса. |
| complete | Функция, выполняемая после получения ответа от сервера (любого, успешного или нет). |
| success | Функция, выполняемая при удачном выполнении запроса. |
| error | Функция, выполняемая в случае ошибки. |
Ниже приведу еще несколько примеров использования ajax-запросов.
Отправка формы со всеми данными ajax-запросом через jQueryПримерный код html-формы:
Ваше имя:
JavaScript код:
$("#myform").submit(function(e) { e.preventDefault(); $.ajax({ type: $(this).attr("method"), url: "", data: $(this).serialize(), async: false, dataType: "html", success: function(result){ alert("Форма отправлена"); } }); });
Для того чтобы страница не перезагружалась при нажатии на кнопку "submit", сначала отменяем стандартые действия браузера использовав e.preventDefaults() .
В параметре data мы передаем все поля формы использовав $(this).serialize() - эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.
Так же, здесь использован параметр async: false , чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.
Отправка изображения или файла ajax-запросом через jQueryЗадача отправки файла или изображения на сервер без перезагрузки страницы довольно часто возникает. В этом примере разберу сразу 2 фишки: выбор файла по нажатию на кнопку , которая может быть оформлена как угодно, и отображение прогресса при передаче файла на сервер ajax-запросом.
html-код будет такой:
Загрузить изображение
#addfile { position: relative; overflow: hidden; width: 180px; height: 34px; } #load_file { position: absolute; top: 0; left: 0; width: 180px; height: 34px; font-size: 0px; opacity: 0; filter: alpha(opacity:0); } #load_file:hover { cursor: pointer; }
Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.
Теперь javascript код отправки файла на сервер с отображением прогресса:
$(function() { $("#load_file").on("change", loadfile); }); function loadfile() { $("#addfile span").html("Загружено 0 %"); files = $("#load_file").files; var form = new FormData(); form.append("upload", files); $.ajax({ url: "", type: "POST", data: form, cache: false, processData: false, contentType: false, xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { myXhr.upload.addEventListener("progress",ShowProgress, false); } return myXhr; }, complete: function(data){ $("#addfile span").html("Загрузить изображение"); $("#load_file").val(""); }, success: function(message){ alert(message); }, error: function(jqXHR, textStatus, errorThrown) { alert(textStatus+" "+errorThrown); } }); } function ShowProgress(e) { if(e.lengthComputable){ $("#addfile span").html("Загружено "+Math.round(100*e.loaded/e.total)+" %"); } }
При загрузке файла на сервер в кнопке будет показываться сколько % уже передано на сервер. После завершения загрузки название кнопки возвращается как было, а значение input-а с файлом устанавливается пустым, чтобы можно было снова выбирать новый файл.
Пример серверной части на php (по просьбе Евгения):
$message = ""; if (empty($_FILES["upload"]["name"]) || $_FILES["upload"] == "none") { $message = "Вы не выбрали файл"; } else if ($_FILES["upload"]["size"] == 0 || $_FILES["upload"]["size"] > 9437184) { $message = "Размер файла не соответствует нормам (максимум 9 Мб)"; } else if (($_FILES["upload"]["type"] != "image/jpeg") && ($_FILES["upload"]["type"] != "image/pjpeg") && ($_FILES["upload"]["type"] != "image/gif") && ($_FILES["upload"]["type"] != "image/png")) { $message = "Допускается загрузка только картинок JPG, GIF и PNG."; } else if (!is_uploaded_file($_FILES["upload"]["tmp_name"])) { $message = "Что-то пошло не так. Попытайтесь загрузить файл ещё раз."; } else { $ftype = $_FILES["upload"]["type"]; $fname = "newname_image.".($ftype == "image/gif" ? "gif" : ($ftype == "image/png" ? "png" : "jpg")); if (move_uploaded_file($_FILES["upload"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"]."/files/".$fname)) { $message = "Изображение успешно загружено."; } else { $message = "Что-то пошло не так. Попытайтесь загрузить файл ещё раз."; } } exit($message);
Информация о загруженном изображении будет содержаться в $_FILES["upload"] , т.к. скриптом файл добавлялся так: form.append("upload", files); Соответственно, всё что требуется от php-программы - это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);
Ситуаций, в которых можно и даже нужно использовать ajax-запросы, очень много и все их здесь не разобрать. Тем не менее, если есть предложения, какие еще примеры имеет смысл сюда добавить, пишите в комментариях.
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() :
