Пример вызова:
$.ajax({ type: "POST", data: 'id=1&pid=0', url: '/path/to/script', success: function(data) { //Код при успехе } });
Перейти к более подробным примерам
Основные настройки которые чаще всего используются: url
, data
, type
, async
, error
, success
Настройки:
Название | Тип | По умолчанию | Описание |
---|---|---|---|
type | string | GET | HTTP-метод передачи данных при выполнении запроса. Обычно используются Пример: $.ajax({ //... type: "POST", //... }); |
url | string | текущая страница | Строка, содержащая URL-адрес, по которому посылается запрос. Пример: $.ajax({ //... url: "/path/to/script", //... }); |
data | string | object | Данные, отправляемые c запросом на сервер. Они преобразовываются в строку запроса и по умолчанию обязательно кодируются в URL-подобный вид (За автоматическое кодирование в формат URL отвечает параметр Строка присоединяется к строке запроса URL, если запрос выполняется методом GET. Если же запрос выполняется методом POST, то данные передаются в теле запроса. Пример: $.ajax({ //... data: 'value1=1&value2=2&value3=3', //... }); Если данный параметр является объектом в виде набора пар имя_свойства/значение, а значение является массивом, то jQuery сериализует объект в последовательность нескольких значений с одним и тем же ключом. Пример: {Foo: [ "bar1", "bar2"]} Станет &Foo=bar1&Foo=bar2 |
|
async | boolean | true | Флаг выполнения асинхронных запросов. Пример: $.ajax({ //... async: false, //... }); |
dataType | string | Строка, определяющая название типа данных, ожидаемых в ответе сервера. Если тип данных не задан, jQuery сама пытается его определить, ориентируясь на MIME-тип ответа сервера. Допустимые значения:xml , html , script , json , jsonp , text . (Это необходимо для того, чтобы определить метод обработки данных, полученных в ответе на запрос, функцией dataFilter перед тем, как они будут переданы функции обратного вызова success.) |
|
cache | boolean | true | Флаг кэширования ответа. По умолчанию имеет значение |
contentType | string | application/x-www-form-urlencoded | Тип содержимого в запросе (при передаче данных на сервер). |
context | object | Данный объект станет контекстом (this) для всех функций обратного вызова, связанных с данным ajax-запросом (например, для функций success или error )
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); } }); |
|
global | boolean | true | Вызов глобальных обработчиков событий на различных этапах ajax-запроса, например, функций ajaxStart или ajaxStop |
ifModified | boolean | false | Если установлено значение |
username | string | Имя пользователя, которое будет использоваться для HTTP авторизации на сервере. |
|
password | string | Пароль, который будет использоваться в ответ на требование HTTP авторизации на сервере. | |
processData | boolean | true | Данные, передаваемые на сервер в параметре |
scriptCharset | string | При выполнении запросов методом |
|
timeout | integer | Устанавливает максимальное время ожидания ответа сервера в милисекундах. Имеет приоритет над глобальной установкой предельного времени ожидания через |
Название | Параметры | Описание |
---|---|---|
error | XHR, textStatus, errorThrown | Срабатывает при неудачном запросе. Функции передаются три аргумента:
Пример: $.ajax({ //... error: function() { alert('Ошибка!'); }, //... }); |
success | data, textStatus, XHR | Срабатывает при успешном запросе. Функции передаются три аргумента:
Пример: $.ajax({ //... success: function() { alert('Успех!'); }, //... }); |
beforeSend | XHR | Срабатывает перед отправкой запроса. В качестве единственного аргумента ей передается экземпляр объекта Пример: $.ajax({ //... beforeSend: function() { alert('Сработал beforeSend!'); }, //... }); |
complete | XHR, textStatus | Срабатывает по окончанию запроса независимо от его успеха или неудачи (а также после функций |
<!DOCTYPE html> <html> <head> <!-- Обязательно подключите библиотеку jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> function testAjax(id, pid) { $.ajax({ type: "POST", data: 'id=' + id + '&pid=' + pid, url: '/path/to/script/test.php', success: function(data) { var obj = $.parseJSON(data); //Преобразование json ответа сервера if (obj.error == 0) { alert('Запрос прошел успешно'); } else { alert(obj.error); } } }); return true; } </script> </head> <body> <a href="#" onclick="testAjax(1, 0)">Успешный запрос</a><br /> <a href="#" onclick="testAjax(0, 1)">Запрос с ошибкой</a> </body> </html>
PHP скрипт (test.php):
<?php if ($_POST['id'] == 1 && $_POST['pid'] == 0) { echo json_encode(array('error' => 0)); } else { echo json_encode(array('error' => 1, 'message' => 'Что то пошло не так!')); } ?>
Еще один пример, отличается выводом ответа:
<!DOCTYPE html> <html> <head> <!-- Обязательно подключите библиотеку jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> function testAjax(id, pid) { $.ajax({ type: "POST", data: 'id=' + id + '&pid=' + pid, url: '/path/to/script/test.php', success: function(data) { $('#content').html(data); } }); return true; } </script> </head> <body> <a href="#" onclick="testAjax(1, 0)">Успешный запрос</a><br /> <a href="#" onclick="testAjax(0, 1)">Запрос с ошибкой</a> <p>Ответ:</p> <div id="content"></div> </body> </html>
PHP скрипт (test.php):
<?php if ($_POST['id'] == 1 && $_POST['pid'] == 0) { echo 'Все хорошо'; } else { echo 'У нас тут ошибочка!'; } ?>
Больше информации можно посмотреть по адресу: http://api.jquery.com/jquery.ajax/
Комментарии
Комментарии отсутствуют, Вы можете быть первым