jQuery функция $.post()

jQuery AJAX

Определение и применение

jQuery функция $.post() позволяет загрузить данные с сервера с помощью HTTP запроса методом POST. Для загрузки данных с помощью HTTP запроса методом GET вы можете воспользоваться jQuery функцией $.get().


Обращаю Ваше внимание, что функция $.post() является сокращенной версией функции $.ajax() со следующими параметрами:

$.ajax({
  type: "POST" // метод HTTP, используемый для запроса	
  url: "url", // строка, содержащая URL адрес, на который отправляется запрос
  data: data, // данные, которые будут отправлены на сервер
  success: success, // функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно
  dataType: "dataType" // тип данных, который вы ожидаете получить от сервера	
});

Метод GET в отличии от POST при отправке формы передает собранную информацию как часть URL:

url?name=value&name=value // метод GET использует пары имя = значение

При отправке данных методом POST данные передаются таким образом, что пользователь уже не видит передаваемые обработчику формы данные (добавляет данные формы в теле запроса http, которые не отображаются в URL).

Обратите внимание на некоторые нюансы при работе с HTTP методами GET и POST:

jQuery синтаксис:

Синтаксис 1.0:

$.post( url, data, success, dataType );

url - String
data - PlainObject, или String 
success - Function( PlainObject data, String textStatus, jqXHR jqXHR )
dataType - String

Синтаксис 1.12/2.2:

$.post( {settings} ); // параметры запроса передаются в объекте

settings - PlainObject

Страницы, загруженные функцией $.post() никогда не кэшируются, по этой причине значения параметров cache (определяет будут ли кэшироваться страницы, по умолчанию true) и ifModified (проверяет поля заголовка Last-Modified, по умолчанию false) jQuery функции .ajaxSetup() (устанавливает значения по умолчанию для будущих запросов AJAX) не повлияют на эти запросы.

Добавлен в версии jQuery

1.0

Значения параметров

ПараметрОписание
urlСтрока, содержащая URL адрес, на который отправляется AJAX запрос. Обязательный параметр.
dataОбъект или строка, которые будут отправлены на сервер вместе с AJAX запросом.
successФункция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Необязательный параметр.
Функция принимает следующие параметры:
  • data - данные возвращенные с сервера.
  • textStatus - строка описывающая статус запроса.
  • jqXHR - объект jqXHR (до версии jQuery 1.4.x объект XMLHttpRequest).
dataTypeОпределяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML тип MIME приведет к получению XML, с версии jQuery 1.4 json будет давать объект JavaScript, script будет выполнять скрипт, а все остальное будет возвращено в виде строки). Необязательный параметр.

Доступные типы (результат передается в качестве первого аргумента в функцию обратного вызова success):

  • "xml" - возвращает XML документ, который может быть обработан с помощью jQuery.
  • "html" - возвращает HTML как обычный текст, теги <script> будут обработаны и выполнены после вставки в объектную модель документа (DOM).
  • "script" - расценивает ответ как JavaScript и возвращает его как обычный текст. Отключает кэширование с помощью добавления параметра к строке запроса _=[TIMESTAMP], даже если парамета cache имеет значение true. Это превратит метод POST в GET для кроссдоменных запросов.
  • "json" - расценивает ответ как JSON и возвращает объект JavaScript. Кроссдоменные "json" запросы преобразуются в "jsonp", если в параметрах запроса не указано jsonp: false. Данные JSON парсятся в строгом порядке и должны соответствовать общепринятому формату, любой некорректный JSON отвергается и выдается ошибка. С версии jQuery 1.9, пустой ответ не принимается, сервер должен вернуть в качестве ответа NULL, или {}.
  • "jsonp" - загружает данные в формате JSON, используя при этом формат загрузки JSONP. Добавляет дополнительный параметр "?callback=?" в конец URL адреса для указания имени функции обработчика. Отключает кэширование путем добавления параметра _=[TIMESTAMP] к URL адресу,даже если парамета cache имеет значение true.
  • "text" - обычная текстовая строка.
  • несколько значений - значения разделяются пробелом. Начиная с версии 1.5, jQuery может преобразовать тип данных, который получен в Content-Type заголовка, в тип данных, который вам требуется. Например, если вы хотите, чтобы текстовый ответ был расценен как XML, используйте "text XML" для этого типа данных. Вы также можете сделать JSONP запрос, получить его в виде текста и интерпретировать его в формате XML: "jsonp text XML". Следующая строка позволит сделать тоже самое: "jsonp XML", jQuery будет пытаться конвертировать из JSONP в XML, после неудачной попытки попытается преобразовать JSONP в текст, а затем из текста уже в XML.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery функции $.post()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "form" ).submit(function(){
	    var formData = $( this ).serialize(); // создаем переменную, которая содержит закодированный набор элементов формы в виде строки

	    $.post( "user.php", formData, function( data ) { //  передаем и загружаем данные с сервера с помощью HTTP запроса методом POST
	      $( "div" ).html( data ); // вставляем в элемент <div> данные, полученные от сервера
	    })
	  });
	});
		</script>
	</head>
	<body>
		<form method = "post">
			<input type = "text" placeholder = "Имя" name = "firstName" required> <!-- поле обязательно к заполнению -->
			<input type = "text" placeholder = "Фамилия" name = "lastName" required> <!-- поле обязательно к заполнению -->
			<input type = "submit" value = "Добавить">
		</form>
		<div></div>
	</body>
</html>

В этом примере мы привязываем JavaScript обработчик событий "submit" (обработчик отправки формы), который срабатывает в момент отправки (в нашем случае заполненной) формы при нажатии на элемент <input> с типом submit (кнопка для отправки формы).

Кроме того, мы создаем переменную, которая содержит закодированный набор элементов формы в виде строки - результат выполнения метода .serialize(). После этого с использованием jQuery функции $.post() выполняем асинхронный AJAX запрос со следующими параметрами:


Результат нашего примера:

Пример использования jQuery функции $.post()
Пример использования jQuery функции $.post()
jQuery AJAX