Pro jQuery
Адам Фриман
Использование Ajax плагина для форм
Итак, я использовал встроенную jQuery поддержку для Ajax. Как я упоминал ранее, одной из сильных сторон jQuery является та простота, с которой он может быть расширен для добавления нового функционала, и целый мир плагинов, которые этому способствуют. Чтобы закончить эту главу, я собираюсь кратко описать полезный плагин, связанный с формами.
Если вы заинтересованы в использовании только Ajax для отправки данных из формы на сервер, тогда вам может понравиться плагин Ajax Forms, который можно загрузить с www.malsup.com/jquery/form. Это плагин, который делает использование Ajax с формами очень простой, как показано в листинге 14-20.
Листинг 14-20: Использование плагина Ajax Forms
<!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>
<script src="jquery.form.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript">
$(document).ready(function () {
$.getScript("myscript.js");
$('form').ajaxForm(function (data) {
console.log(JSON.stringify(data))
});
});
</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>
В этом примере я добавил в документ скриптовый файл jquery.form.js
(он скачивается при загрузке плагина) и в элементе script
вызвал для элемента form
метод ajaxForm
. Аргументом метода ajaxForm
является функция обратного вызова, и это дает мне доступ к ответу с сервера. Это аккуратный и настолько простой подход для базовых Ajax форм, что даже URL для отправки формы берется с самого элемента form
.
Этот плагин делает намного больше, и он включает в себя даже некоторую поддержку базовой валидации форм, но если же вы хотите сами управлять своими Ajax запросами, тогда я предлагаю вам использовать низкоуровневые возможности Ajax, которые я опишу в главе 15. Но для быстрых и простых решений этот плагин действительно очень удобен и имеет хороший дизайн.