jQuery - отправка данных AJAX. Примеры.
- GET запрос через AJAX
- POST запрос через AJAX
- Отправка формы через AJAX
- Работа с JSON
- Выполнение JS загруженного через AJAX
- Дождаться выполнения AJAX запроса
- Отправка HTTP заголовков
- Ajax - Обработка ошибок
Сегодня технология AJAX используется практически на всех ресурсах интернета. Спектр её применения необычайно широк и технологичен. Основная задача AJAX это обмен данными между сайтом и сервером без традиционной перезагрузки страницы.
GET запрос через AJAX
Например, нам нужно обратиться к файлу test.php с парамертром "testdata" и значением "test" и получить ответ сервера, что данные приняты, но без перезагрузки страницы в от личии от традиционного GET запроса как а браузерной строке "https://site.ru?testdata=test" с перезагрузкой. При удачном запросе в ответе получаем сообщение: "Успешное получение данных".
$.ajax({
url: '/test.php', /* Куда пойдет запрос */
method: 'get', /* Метод передачи (post или get) */
dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */
data: {testdata: 'test'}, /* Параметры передаваемые в запросе. */
success: function(data){ /* функция которая будет выполнена после успешного запроса. */
alert(data); /* В переменной data содержится ответ от test.php. */
}
});Или использовать сокращённую функцию $.get
$.get('/test.php', {testdata: 'Test'}, function(data){
alert(data);
});Код файла приёма данных:
if($_GET['testdata'] == 'test'){
echo 'Успешное получение данных - ' . $_GET['test'];
}GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false.
$.ajax({
url: '/test.php',
method: 'get',
cache: false
});POST запрос через AJAX
$.ajax({
url: '/test.php',
method: 'post',
dataType: 'html',
testdata: {text: 'Test'},
success: function(data){
alert(data);
}
});
//Или сокращенный вариант – функция $.post
$.post('/test.php', {testdata: 'Test'}, function(data){
alert(data);
});POST запросы ни когда не кэшируются.
Отправка формы через AJAX
При отправке формы применяется функция serialize().
Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива:
{login: 'ЗНАЧЕНИЯ_ПОЛЯ', password: 'ЗНАЧЕНИЯ_ПОЛЯ'}.
Особенности serialize():
Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
serialize можно применить только к тегу form и полям формы, т.е. $('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>if (empty($_POST['login'])) {
echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
echo 'Укажите пароль';
} else {
echo 'Авторизация...';
}Работа с JSON
Приориететное применение в случае когда в ответе нужно передать массив данных.
$.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 (если он используется на сайте).
...
// Очистка буфера
ob_end_clean();
header('Content-Type: application/json');
echo json_encode($result, JSON_UNESCAPED_UNICODE);
exit();Выполнение JS загруженного через AJAX
В JQuery реализована функция подгруздки javascript кода через AJAX, после успешного получения ответа на запрос он будет сразу выполнен.
$.ajax({
method: 'get',
url: '/script.js',
dataType: "script"
});
//Или короткий вариант
$.getScript('/script.js');Дождаться выполнения AJAX запроса
По умолчанию в JQuery AJAX запросы выполняются асинхронно. Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно.
Пример:
var text = '';
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
success: function(data){
text = data;
}
});
alert(text); /* Переменная будет пустая. */Переменная text будет пустая, а не как ожидается текст который вернул index.php
Чтобы включить синхронный режим нужно добавить параметр async: false.
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в
страницы.
var text = '';
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
async: false,
success: function(data){
text = data;
}
});
alert(text); /* В переменной будет результат из index.php. */Отправка HTTP заголовков
Через AJAX можно отправить заголовки HEAD, они указываются в параметре headers.
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
headers: {'Token_value': 123},
success: function(data){
console.dir(data);
}
});В PHP они будут доступны в массиве $_SERVER, ключ массива переводится в верхний регистр с приставкой HTTP_, например:
<?php echo $_SERVER['HTTP_TOKEN_VALUE']; // 123
Ajax - Обработка ошибок.
Через параметр error задается callback-функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код.
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'json',
success: function(data){
console.dir(data);
},
error: function (jqXHR, exception) {
if (jqXHR.status === 0) {
alert('Not connect. Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found (404).');
} else if (jqXHR.status == 500) {
alert('Internal Server Error (500).');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error. ' + jqXHR.responseText);
}
}
});Через $.ajaxSetup можно задать обработчик ошибок для всех AJAX-запросов на сайте.
$.ajaxSetup({
error: function (jqXHR, exception) {
...
}
});ТОП 10 случайных публикаций
Последние публикации
