Примеры отправки AJAX JQuery

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

1

Запрос идет на 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. */
	}
});
JS

Код можно сократить используя функцию $.get

$.get('/index.php', {text: 'Текст'}, function(data){
	alert(data);
});
JS

Код файла index.php

echo 'Данные приняты - ' . $_GET['text'];
PHP

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false.

$.ajax({
	url: '/index.php',
	method: 'get',
	cache: false
});
JS
2

POST запросы

$.ajax({
	url: '/index.php',
	method: 'post',
	dataType: 'html',
	data: {text: 'Текст'},
	success: function(data){
		alert(data);
	}
});
JS

Или сокращенная версия – функция $.post

$.post('/index.php', {text: 'Текст'}, function(data){
	alert(data);
});
JS

Код файла index.php

echo 'Данные приняты - ' . $_POST['text'];
PHP

POST запросы ни когда не кэшироваться.

3

При отправке формы применяется функция serialize(), подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – {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);
		}
	});
	return false;
});
</script>
HTML

Код файла handler.php

if (empty($_POST['login'])) {
	echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
	echo 'Укажите пароль';
} else {
	echo 'Авторизация...';
}
PHP
4

Идеальный вариант когда нужно работать с массивами данных.

$.ajax({
	url: '/json.php',
	method: 'get',
	dataType: 'json',
	success: function(data){
		alert(data.text);    /* выведет "Текст" */
		alert(data.error);   /* выведет "Ошибка" */
	}
});
JS

Короткая версия

$.getJSON('/json.php', function(data) {
	alert(data.text);
	alert(data.error);
});
JS

$.getJSON передает запрос только через GET.

Код файла json.php

header('Content-Type: application/json');

$result = array(
	'text'  => 'Текст',
	'error' => 'Ошибка'
);

echo json_encode($result);
PHP

Возможные проблемы

При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например:

Из-за них ответ считается не валидным и считается как ошибочный запрос.

В таких случаях помогает очистка буфера вывода ob_end_clean (если он используется на сайте).

...

// Очистка буфера
ob_end_clean(); 
		
header('Content-Type: application/json');
echo json_encode($result, JSON_UNESCAPED_UNICODE);
exit();
PHP
5

В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.

$.ajax({
	method: 'get',
	url: '/script.js',
	dataType: "script"
});
JS

Или

$.getScript('/script.js');
JS
6

По умолчанию в JQuery AJAX запросы выполняются асинхронно. Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно.

Простой пример:

var text = '';

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	success: function(data){
		text = data;
	}
});

alert(text);  /* Переменная будет пустая. */
JS

Переменная text будет пустая, а не как ожидается текст который вернул index.php

Чтобы включить синхронный режим нужно добавить параметр async: false.
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в <head> страницы.

var text = '';

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	async: false,
	success: function(data){
		text = data;
	}
});

alert(text); /* В переменной будет результат из index.php. */
JS
7

Через AJAX можно отправить заголовки HEAD, они указываются в параметре headers.

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	headers: {'Token_value': 123},
	success: function(data){
		console.dir(data);
	}
});
JS

В PHP они будут доступны в массиве $_SERVER, ключ массива переводится в верхний регистр с приставкой HTTP_, например:

<?php
echo $_SERVER['HTTP_TOKEN_VALUE']; // 123
PHP

Для отправки заголовков для всех запросов AJAX с помощью jQuery, можно воспользоваться методом $.ajaxSetup():

$.ajaxSetup({
	headers: {
		'X-CSRF-TOKEN': 'Токен',
		'Authorization': 'Bearer token'
	}
});
JS
8

Через параметр 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);
		}
	}
});
JS

Через метод ajaxError() можно задать обработчик ошибок для всех AJAX-запросов на сайте.

$(document).ajaxError(function(event, xhr, options) {
	 switch (xhr.status){
		case 403:
		   alert('Requested page forbidden (404).');
		break;
		case 404:
		   alert('Requested page not found (404).');
		break;
		case 500:
			alert('Internal Server Error (500).');
		break;
	 }
});
JS
23.12.2016, обновлено 17.03.2024
295924
Предыдущая запись Селекторы JQuery

Комментарии 5

tyaplyap tyaplyap
8 июля 2022 в 20:33
В примере Отправка формы через AJAX страница перезагружается. Видимо нужно добавить return false после $.ajax({});
$("#form").on("submit", function(){
	$.ajax({
		url: '/handler.php',
		method: 'post',
		dataType: 'html',
		data: $(this).serialize(),
		success: function(data){
			$('#message').html(data);
		}
	});
	return false;
});
Алек Садлер Алек Садлер
3 сентября 2022 в 16:51
Все верно, либо return false, либо
$("#form").on("submit", function(e){
...
e.preventDefault();
})
Владик Лимонадик Владик Лимонадик
13 октября 2022 в 16:49
У меня вообще не работали POST запросы, особенно для меня, для начинающего было очень сложно, работали только GET, очень долго голову ломал почему так происходит. Нашёл пример на другом сайте, который работал долго сравнивал и думал почему так. Здесь пример не работает, а на другом сайте рабочий пример оказался.
Так вот:
$.ajax({
url: '/index.php',
method: 'post',
dataType: 'html',
data: {text: 'Текст'},
success: function(data){
alert(data);
}
});
Оказывается чтобы у меня заработали именно POST запросы надо было поменять строчку:
"method: 'post'," на:
"type: 'post'," и всё сразу заработало после этого. А я ведь ни один день ломал голову из-за этой ошибки!
anatoliyrnd anatoliyrnd
13 января 2023 в 21:40
в современном js (даже скорее апи браузера) есть такая штука как fetch и не нужен никакой jquery!
Валерий Герасименко Валерий Герасименко
16 декабря 2023 в 11:15
"Отправка формы через AJAX"
Для ASP.Net MVC имеется стандартный метод отправки форм-представлений с использование частных представлений, который не требует написания всей этой мути GET/POST-запросов. Она, в конечном итоге, имеется, но скрыта во внутренностях системы. Нашёл и пользуюсь (успешно) давно, но где - сказать не могу - потерял эту ссылку. Если интересно, могу поделиться простеньким примером.

, чтобы добавить комментарий.

Другие публикации

Загрузка файлов через AJAX с помощью jQuery Form Plugin
Пример загрузки изображений через AJAX с помощью плагина jQuery Form Plugin.
20172
+7
Загрузка файлов через jQuery AJAX
В преведущей статье был приведен пример отправки файлов через AJAX с помощью плагина «jQuery Form Plugin». Но файлы...
61216
+4
date() – форматирование даты PHP
date($format, $timestamp) – форматирует дату/время по шаблону, где...
76488
0
Календарь jQuery UI Datepicker
DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.
81957
+6
Генерация случайных буквенно-цифровых кодов в PHP
Несколько примеров, как сгенерировать случайные последовательности численных и буквенных строк заданной длины и...
12619
+4
Операции с датами и временем Unixtime в PHP
Unix-время (англ. Unix time, также POSIX-время) — система описания моментов во времени. Определяется как количество...
29195
+14