Урок - jQuery.post()

Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Метод jQuery.post() выполняет HTTP POST-запрос для получения данных с сервера.

Синтаксис метода jQuery.post()

jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

где:

  • url - строка, содержит URL запроса, для отправки данных.
  • data - строка или Plain-объект (ассоциативный массив), данных для отправки на сервер.
  • success(data, textStatus, jqXHR) - функция обратного вызова, вызывается если запрос успешен.
  • dataType - строка, тип данных ожидаемые от сервера. По умолчанию, jQuery пытается определить автоматически (xml, json, script или html).

Пример ниже, эквивалент jQuery.post() в исполнении jQuery.ajax():

$.ajax({
    type: "POST",
    url: url,
    data: data,
    success: success,
    dataType: dataType
});

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

Начиная с версии jQuery 1.5 в функцию success передается jqXHR-объект.

В большинстве реализация обработчик success задается следующим образом:

jQuery.post('ajax/test.html', function(data) {
    $('.result').html(data);
});

В этом примере запрашивается HTML-код и вставляется на страницу, в указнное место.

Данные получаемые методом jQuery.post() никогда не кешируются, таким образом параметры cache и ifModified метода jQuery.ajaxSetup() будут игнорироваться.

jqXHR-объект.

С версии jQuery 1.5 все AJAX-методы возвращают расширенный объект XMLHttpRequest. Это XHR-объект jQuery или коротко jqXHR, возвращается jQuery.post() реализуя Promise-интерфейс, предоставляя ему все свойства, методы и поведение Promise (смотрите Отложенный объект, для получения дополнительной информации). jqXHR.done() (вместо success), jqXHR.fail() (вместо error) и jqXHR.always() (вместо complete) принимают аргумент функции, которая вызывается, когда запрос завершается. Для получения информации об аргументах этой функции обратитесь в раздел документации jQuery.ajax().

Promise-интерфейс также позволяет AJAX-методам в jQuery, в том числе и JQuery.post(), создать цепочку из jqXHR.done(), jqXHR.fail(), jqXHR.always(), т.е. из нескольких методов обратного вызова на один запрос, и даже назначить эти функции, после того как запрос был завершен. Если запрос уже завершен, назначенные вновь методы будут выполнены сразу же.

// Назначаем запросы сразу же после запроса
// и сохраняем jqXHR-объект этого запроса.
var jqxhr = $.get("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(), jqXHR.complete() являются устаревшими с версии jQuery 1.8. В будущем эти методы будут удалены. Используйте вместо них jqXHR.done(), jqXHR.fail(), jqXHR.always(), соответственно.

Дополнительное примечание.

  • Из-за ограничений безопасности браузеров, большинство AJAX-запросов ограничены той же политикой безопасности. AJAX-запросы не могут успешно извлекать информацию из других доменов, поддоменов или протоколов.
  • Если во время запроса jQuery.get() возникает ошибка, то это произойдет не заметно, пока не будет вызван глобальный метод jQuery.ajaxError(). Альтернативой обработки ошибок, начиная с версии jQuery 1.5, может быть jqXHR-объект, возвращаемый jQuery.get().

Примеры

Пример: Выполняется запрос на страницу test.php, но не выполняется обработка данных.

jQuery.post("test.php");

Пример: Запрос на страницу test.php с отправкой некоторых данных (без обработки полученных данных).

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

Пример: Передается массив данных на сервер (без обработки полученных данных).

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

Пример: отправка данных формы используя Ajax-запрос.

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

Пример: Оповещаем об успешном получении данных со страницы test.php (HTML или XML, в зависимости от полученных данных).

jQuery.post("test.php", function(data) {
    alert("Data Loaded: " + data);
});

Пример:Оповещаем об успешном получении данных со страницы test.cgi с дополнительной отправкой данных (HTML или XML, в зависимости от полученных данных).

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

Пример: Получить содержимое страницы test.php, возвращаемые в JSON-формате (<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>), и вывести их на страницу.

jQuery.post("test.php",
    function(data) {
        $('body').append( "Name: " + data.name ) // John
            .append( "Time: " + data.time ); // 2pm
    }, "json"
);

Пример: Отправка данных формы используя Ajax-запрос и вставка полученных данных в div.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.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>
        //    добавляем обработчик сабмита формы
        $("#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 } );
            //    вставляем полученные результаты
            posting.done(function( data ) {
                var content = $( data ).find( '#content' );
                $( "#result" ).empty().append( content );
            });
        });
    </script>
</body>
</html>