Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Функция $.post()
Функция $.post()
позволяет сделать запрос методом POST
. Имеет следующие форматы:
<jqXHR> = $.post(<URL>[, <Данные>][, <Функция обратного вызова>
[, <Тип данных>]])
<jqXHR> = $.post(<Объект с опциями>)
Необязательный параметр <Данные>
позволяет указать строку с закодированными данными (запрос оправляем файлу ajax.php
из листинга 3.6):
$.post('/ajax.php', 'txt1=1', function(data) {
$('#div_ajax').html(data);
}, 'text');
Можно также передать несколько параметров в виде объекта. В этом случае параметры и значения должны быть указаны следующим образом:
{
Параметр1: "Значение1",
Параметр2: "Значение2",
...
ПараметрN: "ЗначениеN"
}
Пример:
$.post('/ajax.php', {txt1: '1'}, function(data) {
$('#div_ajax').html(data);
}, 'text');
В качестве параметра <Функция обратного вызова>
указывается ссылка на функцию следующего формата:
function <Название функции>(<Данные>[, <Статус>[, <Объект jqXHR>]]) {
// ...
}
Внутри функции обратного вызова доступен указатель this
на объект с параметрами запроса. Через первый параметр будут доступны данные, полученные с сервера, а через второй параметр — статус запроса (значение success
— при успешной загрузке). Следует учитывать, что функция вызывается только в случае успешного завершения запроса. Через параметр <Объект jqXHR>
доступна ссылка на объект, имитирующий объект XMLHttpRequest
.
Необязательный параметр <Тип данных>
позволяет указать тип возвращаемых данных. Могут быть указаны значения "json"
, "xml"
, "script"
, "text"
, "html"
и некоторые другие.
Второй формат функции $.post()
позволяет указать объект с опциями:
$.post({
url: '/ajax.php',
data: {txt1: '1'},
success: function(data) {
$('#div_ajax').html(data);
},
dataType: 'text'
});
Функция $.post()
возвращает ссылку на объект jqXHR
. Обработать ошибку загрузки можно с помощью метода fail()
объекта jqXHR
:
$.post('/ajax.php', {txt1: '1'}, function(data) {
$('#div_ajax').html(data);
}, 'text').fail( function(xhr, status, error) {
$('#div_ajax').text('Ошибка: ' + error);
});
Рассмотрим использование метода $.post()
на примере. Создадим документ с формой (листинг 3.26), который будет обмениваться данными в формате XML с файлом ajax.php
(листинг 3.27).
Листинг 3.26. Функция $.post()
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Функция $.post()</title>
</head>
<body>
<div class="container my-3">
<form action="ajax.php" method="GET" onsubmit="return false;">
<div class="form-group">
<input type="text" class="form-control" id="txt1">
</div>
<div class="form-group">
<input type="text" class="form-control" id="txt2">
</div>
<button type="button" class="btn btn-primary"
id="btnSend">Отправить</button>
</form>
</div>
<div class="container my-3">
<div id="div_ajax"></div>
</div>
<script src="/js/jquery.min.js"></script>
<script>
$('#btnSend').click( function() {
// Отправка запроса методом POST
var txt1 = $('#txt1').val();
var txt2 = $('#txt2').val();
if (txt1 === '' || txt2 === '') {
window.alert('Не заполнено поле');
return;
}
$('#div_ajax').text('Загрузка...');
$.post('/ajax.php', { txt1: txt1, txt2: txt2 },
function(xml, status, xhr) {
var txt1 = $('txt1', xml);
var txt2 = $('txt2', xml);
var msg = txt1.eq(0).text() + ' - ' + txt2.eq(0).text() +
' - ' + txt1.eq(1).text() + ' - ' + txt2.eq(1).text();
$('#div_ajax').text(msg);
$('#txt1, #txt2').val('');
}, 'xml').fail( function(xhr, status, error) {
$('#div_ajax').text('Ошибка: ' + error);
});
});
</script>
</body>
</html>
Листинг 3.27. Исходный код файла ajax.php
<?php
// Запрещаем кеширование
header('Expires: Tue, 12 May 2020 01:00:00 GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
// Указываем MIME-тип и кодировку
header('Content-Type: text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8" ?>', "\n";
echo "<ajax>\n";
echo " <serverData>\n";
if ( isset($_POST['txt1']) && isset($_POST['txt2']) ) {
echo ' <txt1>';
echo 'Поле 1 – ';
echo htmlspecialchars($_POST['txt1'], ENT_COMPAT, 'UTF-8');
echo "</txt1>\n";
echo ' <txt2>';
echo 'Поле 2 – ';
echo htmlspecialchars($_POST['txt2'], ENT_COMPAT, 'UTF-8');
echo "</txt2>\n";
}
echo " </serverData>\n";
echo " <serverData>\n";
echo " <txt1>Данные 3</txt1>\n";
echo " <txt2>Данные 4</txt2>\n";
echo " </serverData>\n";
echo "</ajax>\n";
Обратите внимание на следующую инструкцию:
var txt1 = $('txt1', xml);
Библиотека jQuery позволяет работать с XML-документом так же, как и с HTML-документом. Для этого необходимо во втором параметре функции $()
указать XML-документ в качестве контекста.
На самом деле указывать значение "xml"
в параметре <Тип данных>
необязательно. Если сервер возвращает XML-документ и соответствующие заголовки, то через параметр <Данные>
в функции обратного вызова будет доступен документ в формате XML и без указания значения "xml"
.
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов