Главная страница   /   14.4. Использование Ajax плагина для форм (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

14.4. Использование 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. Но для быстрых и простых решений этот плагин действительно очень удобен и имеет хороший дизайн.