ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Сокращенные методы Ajax. POST-запросы

В отличие от GET-запросов данные POST-запросов передаются не в строке запроса, а в его теле. Распространенным примером подобных запросов является отправка данных формы на сервер.

POST-запросы Ajax имеют следующий синтаксис:

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

    Где:

  1. url - строка с URL адресом, на который будет отправлен запрос.
  2. data - объект или строка, которые будут отправлены на сервер вместе с запросом.
  3. success(data, textStatus, jqXHR) - функция обратного вызова, которая выполняется если запрос успешно завершается. Требуется если указан аргумент dataType, но может быть задан как null в таком случае. Она может принимать три параметра: data - данные, полученные с сервера, textStatus - - статус запроса и jqXHR - специальный объект jQuery, который представляет расширенный вариант объекта XMLHttpRequest.
  4. dataType - тип данных ожидаемый от сервера. По умолчанию: распознается по полю Content-Type заголовка ответа сервера, поддерживаются: xml, json, script, text, html.
jQuery.post( [settings ] )Добавлен в версии: 1.12/2.2
  1. settings - aссоциативный массив с настройками Ajax запроса. Все параметры опциональны, исключая url. Значения по умолчанию могут быть установлены при помощи метода $.ajaxSetup(). Смотрите подробнее описание всех возможных параметров на странице jQuery.ajax( settings ). Тип запроса автоматически будет установлен в значение POST.

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

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

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

Чтобы понять как это работает, обратимся к нашим примерам с передачей на сервер слагаемых и данных с формы регистрации пользователей.

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

    $.post('test72.php',
	      {x :"8",y :"14"},
          function(data) {
          $('#par1').html(data);
		  alert("Данные с сервера получены "+data)
    },	
          alert("Данные на сервер загружены"))

Где url это строка test72.php, data это объект {x :"8",y :"14"} и success это функция обратного вызова function(data) получающая ответ сервера data и размещающая его с помощью метода html() в строку с идентификатором par1. Всплывающие диалоговые окна информируют нас о выполнении скрипта.


$(document).ready(function(){
$("#but1").click(function(){
$.post('test72.php',
{x :"8",y :"14"},
function(data) {
$('#par1').html(data);
alert("Данные с сервера получены "+data)
},
alert("Данные на сервер загружены"))
})

});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример обработки запроса методом post()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
$.post('test72.php',
{x :"8",y :"14"},
function(data) {
$('#par1').html(data);
alert("Данные с сервера получены "+data)
},
alert("Данные на сервер загружены"))
})

});
</script>
</head>
<body>
<p id="par1">После нажатия на кнопку в данном поле будет отображен результат выполнения скрипта test72.php.</p>
<input id="but1" type="button" value="Передать данные скрипту" />
</body>
</html>

А теперь получим данные с сервера в формате json. Для этого и на сервере эти данные должны находиться в соответствующем формате.

    $.post('test76.php',
	      {x :"8",y :"14"},
          function(data) {
          $('#par1').html(data.event+data.z);
		  alert("Данные с сервера получены "+data.event+data.z)
    },	
	      'json',
          alert("Данные на сервер загружены")

$(document).ready(function(){
$("#but1").click(function(){
$.post('test76.php',
{x :"8",y :"14"},
function(data) {
$('#par1').html(data.event+data.z);
alert("Данные с сервера получены "+data.event+data.z)
},
'json',
alert("Данные на сервер загружены"))
})

});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример обработки запроса методом post()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
$.post('test76.php',
{x :"8",y :"14"},
function(data) {
$('#par1').html(data.event+data.z);
alert("Данные с сервера получены. "+data.event+data.z)
},
'json',
alert("Данные на сервер загружены"))
})

});
</script>
</head>
<body>
<p id="par1">После нажатия на кнопку в данном поле будет отображен результат выполнения скрипта test72.php.</p>
<input id="but1" type="button" value="Передать данные скрипту" />
</body>
</html>

Поскольку наиболее часто запрос post используется при отправке данных формы, воспользуемся формой для регистрации пользователей получим обратно с сервера данные переданные методом post():

   $("#form").submit(function(event){
	  // Предотвращаем обычную отправку формы
       event.preventDefault();
	   var formData = $(this).serialize();
       $.post("login1.php",
	        formData,
			function(data){
			$('#main').html(data);
			alert("Данные с сервера получены "+data)						
			},
            alert("Данные на сервер загружены")
      )

Чтобы не произошла переадресация мы блокируем обычную отправку формы event.preventDefault().

Протестируем наш скрипт.


$(document).ready(function(){

$(document).ajaxSend(function(){
$("#img").css("display","block");
})
$(document).ajaxComplete(function(){
$("#img").css("display","none");
})
$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = $(this).serialize();
$.post("login1.php",
formData,
function(data){
$('#main').html(data);
alert("Данные с сервера получены "+data)
},
alert("Данные на сервер загружены")
)
})

});
<html>
<head>
<meta charset="utf-8">
<title>Пример обработки запроса методом post()</title>
<style type="text/css">
#img
{
display:none;
position:absolute;
top:140px;
left: 80px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(document).ajaxSend(function(){
$("#img").css("display","block");
})
$(document).ajaxComplete(function(){
$("#img").css("display","none");
})
$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = $(this).serialize();
$.post("login1.php",
formData,
function(data){
$('#main').html(data);
alert("Данные с сервера получены "+data)
},
alert("Данные на сервер загружены")
)
})

});
</script>
</head>
<body>
<div id="main"></div>
<form id="form" action="login1.php" >
<label for="login">Ваш логин:</label><br>
<input name="login" type="text" id="login" required placeholder="Введите логин"><br><br>
<input name="password" type="password" id="password" required placeholder="Введите пароль"><br><br>
<input id="sub1" type="submit" value="Передать данные скрипту" />
</form>
<p id="img"><img src="../../images/loader.gif" > Пожалуйста, подождите, файл находится в обработке.</p>
</body>
</html>