jQuery.post()


jQuery.post( url [, data ] [, success ] [, dataType ] )Возвращает: jqXHR

Описание: Загружает данные с сервера при помощи HTTP POST запроса.

  • Добавлен в версии: 1.0jQuery.post( url [, data ] [, success ] [, dataType ] )

    • url
      Тип: String
      Строка с URL адресом, на который будет отправлен запрос.
    • data
      Тип: PlainObject или String
      Объект или строка, которые будут отправлены на сервер вместе с запросом.
    • success
      Тип: Function( PlainObject data, String textStatus, jqXHR jqXHR )
      Функция обратного вызова, которая выполняется если запрос успешно завершается. Требуется если указан аргумент dataType, но может быть задан как null в таком случае.
    • dataType
      Тип: String
      Тип данных ожидаемый от сервера. По умолчанию: распознается по полю Content-Type заголовка ответа сервера, поддерживаются: xml, json, script, text, html.
  • Добавлен в версии: 1.12/2.2jQuery.post( [settings ] )

    • settings
      Тип: PlainObject
      Ассоциативный массив с настройками Ajax запроса. Все параметры опциональны, исключая url. Значения по умолчанию могут быть установлены при помощи метода $.ajaxSetup(). Смотрите подробнее описание всех возможных параметров на странице jQuery.ajax( settings ). Тип запроса автоматически будет установлен в значение POST.

Это сокращенная Ajax функция, которая эквивалентна следующему коду:

1
2
3
4
5
6
7
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});

В функцию обратного вызова success передаются полученные данные, которые могут быть XML документом или строкой в зависимости от MIME типа ответа. Также передается текстовый статус ответа.

Начиная с jQuery 1.5, в функцию success также передается "jqXHR" objectjQuery 1.4 и ранее, передавался объект XMLHttpRequest).

В большинстве случаев обработчик success указывают:

1
2
3
$.post( "ajax/test.html", function( data ) {
$( ".result" ).html( data );
});

В это примере полученный из запроса HTML код вставляется в элемент на странице.

Страницы запрошенные при помощи POST никогда не кэшируются, поэтому опции cache и ifModified в jQuery.ajaxSetup() не будут иметь никакого эффекта для таких запросов.

Объект jqXHR

Начиная с jQuery 1.5, все Ajax методы jQuery возвращают объект XMLHTTPRequest. Объект jQuery XHR или "jqXHR," возвращается $.get() реализацией интерфейса Promise и предоставляет все его свойства, меоды и повередени Promise в целом (смотрите Deferred object для справки). Методы jqXHR.done() (успех), jqXHR.fail() (ошибка), and jqXHR.always() (для гарантированного обработчика, не зависимо от успеха или ошибки ответа, добавлен в версии jQuery 1.6) принимают функцию, которая вызывается когда запрос завершается. Аргументы этих функция описаны на странице jqXHR Object в разделе $.ajax() справки.

Интерфейс Promise также разрешает Ajax методам, включая $.get(), вызывать неоднократно по цепочке методы .done(), .fail() и .always() для одного запроса и даже назначать его обработчики, даже после того как запрос был завершен. Если запрос уже выполнен, то функция обратного вызова выполняется немедленно.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Назначает обработчики сразу после совершения запросов,
// и запоминает объект jqxhr для этого запроса
var jqxhr = $.post( "example.php", function() {
alert( "success" );
})
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "finished" );
});
// Выполняем тут какую то работу ...
// Устанавливаем другую функцию обработчик для запроса выше
jqxhr.always(function() {
alert( "second finished" );
});

Уведомление об устаревании

Функции обратного вызова jqXHR.success(), jqXHR.error(), and jqXHR.complete() удалены в jQuery 3.0. Используйте методы jqXHR.done(), jqXHR.fail() и jqXHR.always() вместо них.

Дополнительные примечания:

  • Из-за ограничений безопасности браузера большинство "Ajax" запросов подпадают под действие политики того же происхождения, запросы не могут быть выполнены к другим доменам, поддоменам, порту или протоколу.
  • Если запрос jQuery.post() возвращает код ошибки, то он будет выполнен тихо, до тех пор пока не будет вызван глобальный .ajaxError() метод. В качестве альтернативы, начина с jQuery 1.5, метод .error() в объекте jqXHR возвращаемый jQuery.post() также доступен для обработки ошибок.

Примеры:

Запрос страницы "test.php", но без обработки полученного результата.

1
$.post( "test.php" );

Запрос страницы "test.php" с отправкой дополнительных данных (все еще игнорируем полученные результаты выполнения запроса).

1
$.post( "test.php", { name: "John", time: "2pm" } );

Передает массив данных на сервер (все еще игнорируем полученные результаты выполнения запроса).

1
$.post( "test.php", { 'choices[]': [ "Jon", "Susan" ] } );

Отправляет данные формы с Ajax запросом

1
$.post( "test.php", $( "#testform" ).serialize() );

Показывает результат выполнения запроса в alert'е (HTML или XML, зависит от того что вернет сервер).

1
2
3
$.post( "test.php", function( data ) {
alert( "Data Loaded: " + data );
});

Показывает результат выполнения запроса в alert'е, запрос передает дополнительные данные на сервер.

1
2
3
4
$.post( "test.php", { name: "John", time: "2pm" })
.done(function( data ) {
alert( "Data Loaded: " + data );
});

POST запрос на страницу "test.php" и получение содержимого в формате json (<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>).

1
2
3
4
$.post( "test.php", { func: "getNameAndTime" }, function( data ) {
console.log( data.name ); // John
console.log( data.time ); // 2pm
}, "json");

Отправляет данные формы при помощи Ajax запроса и помещение ответа сервере в div элемент

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- результат поиска будет размещен внутрь этого div элемента -->
<div id="result"></div>
<script>
// Прикрепляем submit обработчик формы
$( "#searchForm" ).submit(function( event ) {
// Останавливает дальнейший сабмит формы с обновлением страницы
event.preventDefault();
// Получает некоторые значение из элементов на этой странице:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Отправляет данные при помощи POST запроса
var posting = $.post( url, { s: term } );
// Помещаем результат внутрь div элемента
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>
</body>
</html>

Демонстрация: