Функция $.post()

Функция $.post() позволяет сделать запрос методом POST. Имеет следующий формат:

$.post(<URL>[, <Данные>][, <Функция обратного вызова>
       [, <Тип данных>]])

Следует учитывать, что данные можно загрузить только с того же домена. Необязательный параметр <Данные> позволяет передать несколько параметров. Для этого параметры и значения должны быть указаны следующим образом.

{
   Параметр1: "Значение1",
   Параметр2: "Значение2",
   ...
   ПараметрN: "ЗначениеN"
}

Кроме того, можно указать сформированную строку запроса. В этом случае заботиться о допустимости символов необходимо самим.

txt1=%D0%A2%D0%B5%D0%BA%D1%81%D1%82&id=5

В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>(<Данные>[, <Статус>]) {
   // ...
}

Внутри функции обратного вызова доступна ссылка (this) на объект с параметрами запроса. Следует учитывать, что функция вызывается только в случае успешного завершения запроса. Если необходимо контролировать процесс запроса и обрабатывать ошибки, то следует воспользоваться функцией $.ajax().

Необязательный параметр <Тип данных> позволяет указать тип возвращаемых данных. Могут быть указаны значения "json", "xml" и некоторые другие. Если указано значение "json", то данные будут выполнены с помощью функции eval(), и JSON-объект будет доступен через параметр <Данные> в функции обратного вызова.

$.post("/ajax.php", { id:1 }, function(data) {
   alert(data.param1 + "\n" + data.param2);
}, "json");

Скрипт на сервере:

<?php
header('Content-Type: text/javascript; charset=utf-8');
?>
{
param1: "Текст",
param2: 12
}

Результат выполнения:

Текст
12

Если указано значение "xml", то через параметр <Данные> в функции обратного вызова будет доступен документ в формате XML.

$.post("/ajax.php", { id:1 }, function(xml) {
   var text1 = $("text1", xml);
   var text2 = $("text2", xml);
   alert(text1.eq(0).text() + " - " + text2.eq(0).text() +
   " - " + text1.eq(1).text() + " - " + text2.eq(1).text());
}, "xml");

Скрипт на сервере:

<?php
header('Content-Type: text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8" ?>', "\n";
?>
<ajax>
   <otvet>
      <text1>Поле 1</text1>
      <text2>Поле 2</text2>
   </otvet>
   <otvet>
      <text1>Поле 3</text1>
      <text2>Поле 4</text2>
   </otvet>
</ajax>

Результат выполнения:

Поле 1 - Поле 2 - Поле 3 - Поле 4

На самом деле указывать значение "xml" необязательно. Если сервер возвращает XML-документ и соответствующие заголовки, то через параметр <Данные> в функции обратного вызова будет доступен документ в формате XML и без указания значения "xml".

Обратите внимание на следующую строку.

var text1 = $("text1", xml);

Библиотека jQuery позволяет работать с XML-документом так же, как и с HTML-документом. Для этого необходимо во втором параметре функции $() указать XML-документ в качестве контекста.

Для примера рассмотрим форму отправки сообщения. Отправлять сообщение на адрес электронной почты мы не будем, так как очень часто письма не доходят до адресата. Вместо этого будем сохранять сообщение в базе данных MySQL. В этом случае администрация сайта точно получит сообщение. SQL-запрос для создания таблицы представлен в листинге 11.13. Содержимое файла index.php (файл с формой) представлено в листинге 11.14, а текст файла ajax.php (для сохранения сообщения) содержится в листинге 11.15.

Листинг 11.13. SQL-запрос для создания таблицы

CREATE TABLE `mail` (
   `id` int(11) auto_increment,
   `name` varchar(255) default '',
   `email` varchar(255) default '',
   `tema` varchar(255) default '',
   `msg` text,
   `date_msg` datetime,
   `status` enum('new', 'old'),
   PRIMARY KEY (`id`)
) engine=MYISAM character set `utf8` collate `utf8_general_ci`

Листинг 11.14. Содержимое файла index.php

<?php
// Запрещаем кеширование
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
// Указываем кодировку
header('Content-Type: text/html; charset=utf-8');
?>
<!doctype html>
<html>
<head>
<title>Функция $.post()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
function f_result(xml) {
   var status = $("status", xml).eq(0).text();
   var msg = $("msg", xml).eq(0).text();
   if (status == "ok") {
      $("#author").val("");
      $("#emails").val("");
      $("#tema").val("");
      $("#msg").val("");
   }
   $("#div1").html(msg);
   $("#btn").removeAttr("disabled");
}
$(document).ready(function() {
   $("#frm").submit(function() {
      $("#btn").attr("disabled", true);
      $("#div1").html("Загрузка...");
      $.post("/ajax.php", $("#frm").serialize(), f_result, "xml");
      return false;
   });
   $("#author").keypress(function(e) {
      if (e.keyCode==13) {
         $("#emails").focus();
         return false;
      }
   });
   $("#emails").keypress(function(e) {
      if (e.keyCode==13) {
         $("#tema").focus();
         return false;
      }
   });
   $("#tema").keypress(function(e) {
      if (e.keyCode==13) {
         $("#msg").focus();
         return false;
      }
   });
});
</script>
</head>
<body>
<div id="div1"></div>
<form method="POST" action="ajax.php" id="frm">
<b>Имя:</b><br>
<input type="text" name="author" id="author" size="40"><br>
<b>E-mail:</b><br>
<input type="text" name="emails" id="emails" size="40"><br>
<b>Тема:</b><br>
<input type="text" name="tema" id="tema" size="40"><br>
<b>Сообщение:</b><br>
<textarea name="msg" id="msg" style="width:300px; height:150px">
</textarea><br><br>
<input type="submit" id="btn" value="Отправить">
</form>
</body>
</html>

Листинг 11.15. Содержимое файла ajax.php

<?php
// Запрещаем кеширование
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
   header('Content-Type: text/html; charset=utf-8');
   // Здесь обрабатываем данные, если отключен JavaScript
   exit('Данные отправлены не через AJAX');
}
else { // Если отправлено через AJAX
   // Указываем тип документа и кодировку
   header('Content-Type: text/xml; charset=utf-8');
   // Получаем данные
   if (isset($_POST['emails'])) $emails = $_POST['emails'];
   else $emails = '';
   if (isset($_POST['author'])) $author = $_POST['author'];
   else $author = '';
   if (isset($_POST['tema'])) $tema = $_POST['tema'];
   else $tema = '';
   if (isset($_POST['msg'])) $msg = $_POST['msg'];
   else $msg = '';
   $err_msg = '';
   // Удаляем пробельные символы
   $author = trim($author);
   $tema = trim($tema);
   $msg = trim($msg);
   // Если директива magic_quotes_gpc включена,
   // то удаляем защитные слеши перед спецсимволами
   if (get_magic_quotes_gpc()) {
       $author = stripslashes($author);
       $tema = stripslashes($tema);
       $msg = stripslashes($msg);
   }
   $pattern = '/^[a-z0-9_.-]+@([a-z0-9-]+\.)+[a-z]{2,6}$/isu';
   if (!preg_match($pattern, $emails)) {
      $err_msg .= 'Недопустимый адрес E-mail !<br>';
   }
   if (mb_strlen($emails, 'UTF-8') > 60) {
      $err_msg .= 'Длина E-mail больше 60 символов!<br>';
   }
   if (mb_strlen($author, 'UTF-8') == 0) {
      $err_msg .= 'Поле Имя не заполнено!<br>';
   }
   if (mb_strlen($author, 'UTF-8') > 30) {
      $err_msg .= 'Длина поля Имя более 30 символов!<br>';
   }
   if (mb_strlen($tema, 'UTF-8') == 0) {
      $err_msg .= 'Поле Тема не заполнено!<br>';
   }
   if (mb_strlen($tema, 'UTF-8') > 50) {
      $err_msg .= 'Длина поля Тема более 50 символов!<br>';
   }
   if (mb_strlen($msg, 'UTF-8') == 0) {
      $err_msg .= 'Поле Сообщение не заполнено!<br>';
   }
   if (mb_strlen($msg, 'UTF-8') > 65000) {
      $err_msg .= 'Длина поля Сообщение более 65000 символов!<br>';
   }
   if ($err_msg == '') {
      // Подключаемся к базе
      if (!@$db = mysql_connect('localhost', 'root', '123456')) {
         $err_msg .= 'Не удалось установить подключение!<br>';
      }
      else {
         if (mysql_select_db('test')) {
            mysql_query('SET NAMES `utf8`');
         }
         else {
            $err_msg .= 'Такой базы данных нет!<br>';
         }
      }
   }
   if ($err_msg == '') {
      // Если ошибок нет, то сохраняем сообщение. При желании
      // можно отправить на E-mail с помощью функции mail()
      $author = mysql_real_escape_string($author);
      $tema = mysql_real_escape_string($tema);
      $msg = mysql_real_escape_string($msg);
      $q = "INSERT INTO `mail` VALUES (NULL, '$author', '$emails', ";
      $q .= "'$tema', '$msg', NOW(), 'new')";
      if (!mysql_query($q)) {
         $err_msg .= 'Не удалось сохранить сообщение<br>';
      }
      mysql_close($db);
   }
   if ($err_msg != '') {
      $status = 'error';
      $otvet = '<span style="color:red;">' . $err_msg . '</span>';
   }
   else {
      $status = 'ok';
      $otvet = '<span style="color:green; font-weight:bold;">';
      $otvet .= 'Сообщение успешно сохранено</span>';
   }
   $otvet = htmlspecialchars($otvet, ENT_COMPAT, 'UTF-8');
   echo "<ajax>\n";
   echo '<status>' . $status . "</status>\n";
   echo '<msg>' . $otvet . "</msg>\n";
   echo "</ajax>\n";
}
?>
Предыдущая статья Все статьи Следующая статья