jQuery. Функция $.get()

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

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

$.get(<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" и некоторые другие.

В качестве примера использования функции $.get() рассмотрим заполнение взаимосвязанных списков. Изначально из базы данных заполняется первый список. При выборе пункта списка значение параметра value будет отправлено на сервер с помощью функции $.get(). На сервере делаем запрос и выводим связанные разделы. После получения данных в основном файле заполняем второй список. SQL-запрос для создания таблицы представлен в листинге 11.10. Содержимое файла index.php (основной файл) представлено в листинге 11.11, а текст файла ajax.php (для вывода связанных разделов) содержится в листинге 11.12.

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

CREATE TABLE `categories` (
   `id` int(11) auto_increment,
   `name` varchar(255),
   `parentID` int(11),
   PRIMARY KEY (`id`)
) engine=MYISAM character set `utf8` collate `utf8_general_ci`;
INSERT INTO `categories` VALUES (1, 'Раздел 1', 0);
INSERT INTO `categories` VALUES (2, 'Раздел 2', 0);
INSERT INTO `categories` VALUES (3, 'Раздел 3', 0);
INSERT INTO `categories` VALUES (4, 'Подраздел 1.1', 1);
INSERT INTO `categories` VALUES (5, 'Подраздел 1.2', 1);
INSERT INTO `categories` VALUES (6, 'Подраздел 2.1', 2);
INSERT INTO `categories` VALUES (7, 'Подраздел 2.2', 2);
INSERT INTO `categories` VALUES (8, 'Подраздел 3.1', 3);
INSERT INTO `categories` VALUES (9, 'Подраздел 3.2', 3);
INSERT INTO `categories` VALUES (10, 'Подраздел 3.3', 3);

Листинг 11.11. Содержимое файла 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');
// Подключаемся к базе
$db = mysql_connect('localhost', 'root', '123456')
      or die('Не удалось установить подключение');
mysql_select_db('test') or die('Такой базы данных нет');
mysql_query('SET NAMES `utf8`'); // Кодировка соединения
?>
<!doctype html>
<html>
<head>
<title>Функция $.get()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
function f_result(data) {
   if (data.indexOf("ERROR") == -1) {
      var el;
      el = '<select size="4" id="sel2">' + data + '</select>';
      $("#sel2").replaceWith(el);
   }
   else {
      if (data == "") alert("Ошибка запроса");
      else alert(data);
   }
   $("#div1").stop().hide(300);
}
$(document).ready(function() {
   $("#sel1").change(function() {
      $("#div1").stop().show(300);
      $("#sel2").attr("disabled", true);
      $.get("/ajax.php", { id: $("#sel1").val() }, f_result);
   });
});
</script>
<style>
#sel1, #sel2 { width:150px; }
</style>
</head>
<body>
<select size="4" id="sel1">
<?php
$query = 'SELECT `id`, `name` FROM `categories` ';
$query .= 'WHERE `parentID`=0 ORDER BY `name`';
if ($res = mysql_query($query)) {
   while ($row = mysql_fetch_row($res)) {
      echo '<option value="' . $row[0] . '">';
      echo htmlspecialchars($row[1], ENT_COMPAT, 'UTF-8');
      echo "</option>\n";
   }
}
mysql_close($db);
?>
</select>   
<select size="4" id="sel2" style="display:none;">
</select>
<div id="div1" style="display:none;">Загрузка...</div>
</body>
</html>

Листинг 11.12. Содержимое файла 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');
// Указываем кодировку
header('Content-Type: text/html; charset=utf-8');
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
   exit('ERROR: Данные отправлены не через AJAX');
}
if (isset($_GET['id'])) $id = (int)$_GET['id'];
else $id = 0;
if ($id === 0) exit('ERROR: Параметр id содержит ошибку');
// Подключаемся к базе
$db = mysql_connect('localhost', 'root', '123456')
      or die('ERROR: Не удалось установить подключение');
mysql_select_db('test') or die('ERROR: Такой базы данных нет');
mysql_query('SET NAMES `utf8`'); // Кодировка соединения
$query = 'SELECT `id`, `name` FROM `categories` ';
$query .= 'WHERE `parentID`=' . $id . ' ORDER BY `name`';
if ($res = mysql_query($query)) {
   if (mysql_num_rows($res) != 0) {
      while ($row = mysql_fetch_row($res)) {
         echo '<option value="' . $row[0] . '">';
         echo htmlspecialchars($row[1], ENT_COMPAT, 'UTF-8');
         echo "</option>\n";
      }
   }
   else {
      echo '<option value="0">Разделов нет</option>';
   }
}
else {
   echo 'ERROR: Ошибка выполнения';
}
mysql_close($db);
?>