Pro jQuery
Адам Фриман
Создание простого Ajax запроса при помощи Low-Level API
Создание запроса при помощи low-level API не намного сложнее, чем использование сокращенных и удобных методов, которые я описал в главе 14. Разница заключается в том, что вы можете конфигурировать многие различные аспекты запроса и получать намного больше информации о выполняемом запросе. Метод, который является сердцем низкоуровневого API, – это ajax
, и в листинге 15-1 на простом примере показано его использование.
Листинг 15-1: Использование метода ajax
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-1.7.js" type="text/javascript"></script>
<script src="jquery.tmpl.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript">
$(document).ready(function () {
$.ajax("mydata.json", {
success: function (data) {
var template = $('#flowerTmpl');
template.tmpl(data.slice(0, 3)).appendTo("#row1");
template.tmpl(data.slice(3)).appendTo("#row2");
}
});
});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
<div class="dcell">
<img src="${product}.png" />
<label for="${product}">${name}:</label>
<input name="${product}" data-price="${price}" data-stock="${stocklevel}"
value="0" required />
</div>
</script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<form method="post" action="http://node.jacquisflowershop.com/order">
<div id="oblock">
<div class="dtable">
<div id="row1" class="drow">
</div>
<div id="row2" class="drow">
</div>
</div>
</div>
<div id="buttonDiv">
<button type="submit">Place Order</button></div>
</form>
</body>
</html>
Вы используете метод ajax
, передавая URL, который вы хотите запросить, и объект-карту, чьи свойства определяют набор пар ключ-значение, каждая из которых конфигурирует настройки для запроса.
Примечание
В этой главе также используется
Node.js
, как и в главе 14.
В этом примере у моего объекта есть одна настройка: настройка success
указывает функцию, которая будет вызвана, если запрос пройдет удачно. Я запрашиваю с сервера файл mydata.json
и использую его с шаблоном данных для создания и вставки элементов в документ, так же как я делал в предыдущей главе при помощи сокращенных методов. По умолчанию метод ajax
делает HTTP GET
запрос, что обозначает, что это пример эквивалентен использованию методов get
или getJSON
, которые я показал в главе 14. Далее я покажу вам, как конфигурировать POST
запросы.
Тут доступно множество настроек, и я буду раскрывать их на протяжении оставшейся части главы, в дополнение к некоторым полезным методам, которые предоставляет jQuery для более простого использования Ajax.