Пример вызова:
$.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/
devreadwrite.com



Подборка адаптивных шаблонов для вашей CMS
Статьи по
Как получить и установить HTTPS сертификат на сайта

Комментарии
Комментарии отсутствуют, Вы можете быть первым