Функция $.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".

Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов