Используя GET-запрос, необходимо отправить на сервер некоторые данные.
Ответ, полученный от сервера, должен быть вставлен в определенный элемент вебстраницы.
Решение
Попробуем решить задачу, используя вспомогательную функцию $.get(url, [data], [success(data, textStatus, jqXHR)], [dataType]) (листинг 9.1.4).
Листинг 9 .1 .4 . Использование вспомога те л ьной ф ун к ции $.get()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-1-4</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css"> div {
width:400px; height:200px;
padding:10px; margin:10px; border:3px double #369; overflow:auto;
}
</style>
<script type="text/javascript">
$(function () {
$("button:first").click(function(){
$.get("testGet.php",
{ name: "John", age: "35" }, function(data){
$("div").text(data);
});
});
$("button:last").click(function(){
$("div").empty();
});
});
</script>
</head>
<body>
<button>Загрузить</button>
<button>Очистить</button>
</body>
</html>
Обсуждение
В листинге 9.1.4 видим уже привычную разметку — элемент div и два элемента button. Интересующие нас действия происходят при щелчке мышью на кнопке Загрузить. Здесь мы вызываем вспомогательную функцию $.get(), которой передаем три аргумента. Первый аргумент — адрес файла, куда нужно отправить GETзапрос. Второй аргумент — объект, представляющий данные, отправляемые на сервер. На сервере они будут доступны как элементы глобального массива GET['name'] и GET['age']. И третий аргумент — функция, вызываемая при получении успешного ответа сервера. Она выберет элемент div и с помощью метода text() вставит в него ответ сервера в виде текста.
В этой функции мы использовали только один из трех возможных аргументов — data, который содержит ответ сервера (в рассмотренном случае — в виде обычного текста). Но мы могли задействовать также аргумент textStatus, содержащий статус ответа сервера в виде текста, и аргумент jqXHR (до версии 1.5 объект XMLHttpRequest), представляющий собой расширенный объект XMLHttpRequest.
Исходный код файла testGet.php приведен в листинге 9.1.4а.
Листинг 9 .1 .4 a . Исходный код файла testGet.php
<?php
header('Content-Type:
text/html; charset=utf-8'); if($_SERVER['HTTP_X_REQUESTED_WITH'] ==
'XMLHttpRequest') {
if($_GET) {
print 'Имя: ' .
$_GET['name'] . ', возраст: ' . $_GET['age'] . ', время: '
. date('H:i:s', time());
}
}
?>
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Центрирование текста (0)
- Организация табличных данных:удобство доступа и наглядность (0)
- Отображение строкового элемента как блочного, и наоборот (0)
- Как избежать смещения следующего элемента вверх при использовании свойства float (0)
- Второе представление: динамическое содержимое (0)
- Справочник по API доступа к базе данных Django - ЧАСТЬ 3 (0)
- Утилита django-admin - ЧАСТЬ 2 (0)