AJAX-запросы позволяют отправлять и получать данные без перезагрузки страницы. Можно делать проверку форм, подгружать контент и т.д. А функции библиотеки jQuery значительно упрощают процесс.
Запрос идет на index.php с параметром «text» и значением «Текст» через метод GET. По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст
В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.
$.ajax({
url: '/index.php', /* Куда пойдет запрос */
method: 'get', /* Метод передачи (post или get) */
dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */
data: {text: 'Текст'}, /* Параметры передаваемые в запросе. */
success: function(data){ /* функция которая будет выполнена после успешного запроса. */
alert(data); /* В переменной data содержится ответ от index.php. */
}
});
Или короткая запись через функцию $.get:
$.get('/index.php', {text: 'Текст'}, function(data){
alert(data);
});
Код в файле index.php
echo 'Данные приняты - ' . $_GET['text'];
GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр –
cache: false
.
$.ajax({
url: '/index.php',
method: 'get',
cache: false
});
$.ajax({
url: '/index.php',
method: 'post',
dataType: 'html',
data: {text: 'Текст'},
success: function(data){
alert(data);
}
});
Или функция $.post
$.post('/index.php', {text: 'Текст'}, function(data){
alert(data);
});
Код в index.php:
echo 'Данные приняты - ' . $_POST['text'];
POST запросы никогда не кэшируются.
При отправке формы применяется функция serialize()
, подробнее на jquery.com.
Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – {login: 'ЗНАЧЕНИЯ_ПОЛЯ', password: 'ЗНАЧЕНИЯ_ПОЛЯ'}
.
Особенности serialize()
:
$('div.form_container').serialize();
– вернет пустой результат.Пример отправки и обработки формы:
<div class="form_container">
<div id="message"></div>
<form id="form">
<input type="text" name="login">
<input type="text" name="password">
<input type="submit" name="send" value="Отправить">
</form>
</div>
<script>
$("#form").on("submit", function(){
$.ajax({
url: '/handler.php',
method: 'post',
dataType: 'html',
data: $(this).serialize(),
success: function(data){
$('#message').html(data);
}
});
});
</script>
Код в файле handler.php:
if (empty($_POST['login'])) {
echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
echo 'Укажите пароль';
} else {
echo 'Авторизация...';
}
Когда нужно работать с массивами данных.
$.ajax({
url: '/json.php',
method: 'get',
dataType: 'json',
success: function(data){
alert(data.text); /* выведет "Текст" */
alert(data.error); /* выведет "Ошибка" */
}
});
Короткая запись:
$.getJSON('/json.php', function(data) {
alert(data.text);
alert(data.error);
});
$.getJSON передает запрос только через GET.
Код в json.php:
header('Content-Type: application/json');
$result = array(
'text' => 'Текст',
'error' => 'Ошибка'
);
echo json_encode($result);
При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success
не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например пробел перед ответом.
Из-за них ответ считается не валидным и считается как ошибочный запрос.
В таких случаях помогает очистка буфера вывода ob_end_clean
(если он используется на сайте).
...
// Очистка буфера
ob_end_clean();
header('Content-Type: application/json');
echo json_encode($result, JSON_UNESCAPED_UNICODE);
exit();
В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.
$.ajax({
method: 'get',
url: '/script.js',
dataType: "script"
});