jQuery.post()

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

Описание: Отправка данных на сервер с помощью HTTP-запроса POST.

версия добавлена: 1.0jQuery.post( url [, data ] [, success ] [, dataType ] )
- url
  
  Тип: Строка
  
  Строка, содержащая URL, к которому отправляется запрос.
- data
  
  Тип: Объект или Строка
  
  Простой объект или строка, отправляемые на сервер с запросом.
- success
  
  Тип: Функция( Объект данные, Строка статус, jqXHR jqXHR )
  
  Функция обратного вызова, которая выполняется, если запрос успешен. Требуется, если dataType указан, но может быть null в этом случае.
- dataType
  
  Тип: Строка
  
  Тип данных, ожидаемых от сервера. По умолчанию: Интеллектуальное угадывание (xml, json, script, текст, html).
версия добавлена: 1.12-and-2.2jQuery.post( [settings ] )
- settings
  
  Тип: Объект
  
  Набор пар ключ/значение, которые конфигурируют Ajax-запрос. Все свойства, кроме url, необязательны. Значение по умолчанию может быть установлено для любого параметра с помощью $.ajaxSetup(). См. jQuery.ajax( settings ) для полного списка всех параметров. Тип будет автоматически установлен на POST.

Это краткая функция Ajax, которая эквивалентна:

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

Функция обратного вызова success получает возвращённые данные, которые будут корневым XML-элементом или текстовой строкой в зависимости от MIME-типа ответа. Она также получает текстовый статус ответа.

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

В большинстве реализаций будет указан обработчик успеха:

$.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", возвращаемый $.post(), реализует интерфейс Promise, предоставляя все свойства, методы и поведение Promise (см. объект Deferred для получения дополнительной информации). Методы jqXHR.done() (для успеха), jqXHR.fail() (для ошибки) и jqXHR.always() (для завершения, независимо от успеха или ошибки; добавлено в jQuery 1.6) принимают аргумент функции, которая вызывается при завершении запроса. Для получения информации об аргументах, которые принимает эта функция, см. раздел "Объект jqXHR" в документации $.ajax().

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

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });
 
// Perform other work here ...
 
// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second finished" );
});

Замечание по устареванию

Методы обратного вызова jqXHR.success(), jqXHR.error(), и jqXHR.complete() удалены начиная с jQuery 3.0. Можно использовать jqXHR.done(), jqXHR.fail(), и jqXHR.always() вместо них.

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

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

Примеры:

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

$.post( "test.php" );

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

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

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

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

Отправка данных формы с помощью Ajax-запросов

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

Вывести результаты запроса test.php (HTML или XML, в зависимости от возвращённого значения).

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

Вывести результаты запроса test.php с дополнительной нагрузкой данных (HTML или XML, в зависимости от возвращённого значения).

$.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")); ?>).

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

Отправить форму с помощью Ajax и поместить результаты в div

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.post demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<form action="/" id="searchForm">
  <input type="text" name="s" placeholder="Search...">
  <input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
 
<script>
// Attach a submit handler to the form
$( "#searchForm" ).on( "submit", function( event ) {
 
  // Stop form from submitting normally
  event.preventDefault();
 
  // Get some values from elements on the page:
  var $form = $( this ),
    term = $form.find( "input[name='s']" ).val(),
    url = $form.attr( "action" );
 
  // Send the data using post
  var posting = $.post( url, { s: term } );
 
  // Put the results in a div
  posting.done(function( data ) {
    var content = $( data ).find( "#content" );
    $( "#result" ).empty().append( content );
  } );
} );
</script>
 
</body>
</html>

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

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

версия добавлена: 1.12-and-2.2jQuery.post( [settings ] )

Объект jqXHR

Замечание по устареванию

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

Примеры:

Демо: