Используя POST-запрос, необходимо отправить на сервер некоторые данные.
Ответ, полученный от сервера, должен быть вставлен в определенный элемент вебстраницы.
Решение
Попробуем решить задачу, применив вспомогательную функцию $.post(url, [data], [success(data, textStatus, jqXHR)], [dataType]) (листинг 9.1.7).
Листинг 9 .1 .7 . Использование вспомога те л ьной ф ун к ции $.post()
<!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-7</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(){
$.post("testPost.php",
{ name: "Debora", age: "45" }, function(data){
$("div").text(data);
});
});
$("button:last").click(function(){
$("div").empty();
});
});
</script>
</head>
<body>
<button>Загрузить</button>
<button>Очистить</button>
</body>
</html>
Обсуждение
В HTML-коде листинга 9.1.7 видим привычную разметку — элемент div и два элемента button. Интересующие нас действия происходят при щелчке мышью на кнопке Загрузить. Здесь мы вызываем вспомогательную функцию $.post(), которой передаем некоторые аргументы. Первый аргумент — адрес файла, к которому нужно отправить POST-запрос. Второй аргумент — объект, представляющий данные, отправляемые на сервер. На сервере они будут доступны как элементы глобального массива POST['name'] и POST['age']. И третий аргумент — функция, вызываемая при получении ответа сервера. Она выберет элемент div и с помощью метода text(val) вставит в него ответ сервера в виде текста.
В этой функции мы задействовали только один из трех возможных аргументов — аргумент data, который содержит ответ сервера (в рассмотренном случае — в виде обычного текста). Но есть также аргумент textStatus, содержащий статус ответа сервера в виде текста, и аргумент jqXHR (до версии 1.5 объект XMLHttpRequest), представляющий собой расширенный объект XMLHttpRequest.
Исходный код файла testPost.php приведен в листинге 9.1.7а.
Листинг 9 .1 .7 a . Исходный код файла testPost.php
<?php
header('Content-Type:
text/html; charset=utf-8'); if($_SERVER['HTTP_X_REQUESTED_WITH'] ==
'XMLHttpRequest') {
if($_POST) {
print 'Имя: ' .
$_POST['name'] . ', возраст: ' . $_POST['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)