В отличие от GET-запросов данные POST-запросов передаются не в строке запроса, а в его теле. Распространенным примеров подобных запросов является отправка данных формы на сервер.
Для отправки POST-запросов предназначен метод post. Его объявление и использование в целом аналогично методу get. Он принимает
следующие параметры:
url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос
data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом
success(data, textStatus, jqXHR): необязательный параметр - функция обратного вызова, которая будет выполняться при
успешном выполнении запроса. Она может принимать три параметра: data - данные, полученные с сервера, textStatus -
- статус запроса и jqXHR - специальный объект jQuery, который представляет расширенный вариант объекта XMLHttpRequest.
dataType: необязательный параметр, содержащий тип данных в виде строки, например, "xml" или "json"
На выходе метод post возвращает объект jqXHR.
Пример использования:
$.post('ajax.php', {'login':'1111', 'password' : '2222'},
function(data) {
$('#news').html(data);
});
В данном случае мы передаем в качестве данных пароль и логин. На сервере мы можем получить данные и отправить ответ пользователю:
<?php
$login=$_POST['login'];
$pass=$_POST['password'];
if($login=="1111" && $pass=="2222"){
echo "Авторизация прошла успешно";
}
else{
echo "Неверно введен логин или пароль";
}
?>
Поскольку наиболее часто запрос post используется при отправке данных формы, используем на стороне клиента форму:
<html>
<head>
<meta charset='utf-8'>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<form action="ajax.php" id="loginForm">
<input type="text" id="login" placeholder="Логин" /><br><br>
<input type="text" id="password" placeholder="Пароль" /><br><br>
<input type="submit" value="Войти" />
</form>
<div id="result"></div>
<script type="text/javascript">
$("#loginForm").submit(function(event) {
// Предотвращаем обычную отправку формы
event.preventDefault();
$.post('ajax.php', {'login':$('#login').val(), 'password' : $('#password').val()},
function(data) {
$('#result').html(data);
});
});
</script>
</body>
</html>
Итак, серверная часть, к которой будет обращаться форма - файл ajax.php - у нас остается той же. Только в данном случае теперь
для параметра data в методе post мы данные берем из полей на этой форме.
Обратите внимание, что мы блокируем обычную отправку формы (event.preventDefault();), иначе у нас бы шла переадресация.
Посколкьу нередко формы не ограничиваются двумя полями, то проще применять сериализацию формы. Сериализация производится посредством метода
serialize и в качестве результата создает объект javascript, где свойствам соответствуют поля формы. И значения хранят эти свойства те же,
что имеют соответственные поля формы.
Итак, применим сеиализацию формы:
<form action="ajax.php" id="loginForm">
<input type="text" name="login" placeholder="Логин" /><br><br>
<input type="text" name="password" placeholder="Пароль" /><br><br>
<input type="submit" value="Войти" />
</form>
<div id="result"></div>
<script type="text/javascript">
$("#loginForm").submit(function(event) {
// Предотвращаем обычную отправку формы
event.preventDefault();
$.post('ajax.php', $("#loginForm").serialize(),
function(data) {
$('#result').html(data);
});
});
</script>
В отличие от предыдущего примера у нас здесь два отличия. Во-первых, обратите внимание, что поля для ввода имеют атрибут name. При указании параметра data мы производим
сериализацию данных формы через метод serialize: $("#loginForm").serialize(). В данном методе в тело запроса
передаются параметры. Причем имена параметров - это значения атрибутов name полей ввода. А значения параметров - соответственно введенные значения в текстовые поля.
И поэтому с помощью php мы можем извлечь эти значения: $login=$_POST['login'].