↑ Ajax | ||||
Урок - jQuery.post() | ||||
← Предыдущий урок Урок - jQuery.param()
|
Следующий урок → Урок - .load()
|
Метод 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>
↑ Ajax | ||||
Урок - jQuery.post() | ||||
← Предыдущий урок Урок - jQuery.param()
|
Следующий урок → Урок - .load()
|