23.10.09

Добрый день! Сегодня мы посмотрим, как можно легко и просто организовать AJAX отправку информации на сервер с использованием библиотеки jQuery.

Для этого нам потребуется плагин jQuery.Form, который и будет отвечать за такую отправку. Сразу отмечу, что огромным преимуществом такого плагина является отсутствие необходимости в специальной разметке для нашей формы, все будет работать “из коробки”, достаточно лишь добавить немного JavaScript. Также следует отметить, что данный jQuery плагин позволяет организовывать также отправку файлов через AJAX.

Итак, переходим к делу… Для начала нужно подключить jQuery и плагин jQuery.Form:

XHTML
1
2
<script src="scripts/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="scripts/jquery.form.js" type="text/javascript"><!--mce:1--></script>

После создаем нашу форму средствами HTML:

XHTML
1
2
3
4
5
6
<form id="ajaxForm" action="form_action.php" enctype="multipart/form-data" method="post">
<input name="input_file" type="file" />
<input name="input_text" type="text" />
<input name="input_password" type="password" />
<button>Отправить!</button>
</form>

Как видите, форма ничем не отличается от самой обычной формы. Следует отметить, что jQuery плагин работает как с формами, передаваемыми методом GET, так и с формами, передаваемыми методом POST.
Настал черед применить немного магии):

JavaScript
1
2
3
4
5
$(document).ready(function() {
$("#ajaxForm").ajaxForm(function(data) { //"превращаем" форму в форму, отправляемую через AJAX
alert(data); //выводим ответ сервера
});
});

Как видите, буквально парой сточек кода с использованием jQuery мы превратили нашу форму в форму, отправляемую с помощью AJAX.
Конечно же вы в вашем проекте замените alert(data); на что-нибудь более подходящее, в моем случае это было использовано не более чем для примера работоспособности плагина jQuery,

Комментарии

  1. autoturn.ru – автопортал Автоновости, автокредитование, автострахование, автоправо, безопасноть автомобилей, тюнинг, автозвук, тест-драйвы, видео тест-драйвы,доска объявлений по продаже запчастей, отзывы о автомобилях и страховых компаниях.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>