Ajax-форма обратной связи на JQuery

4 / 5

Автор: Администратор

14.08.2015

Теги: javascript, form, jQuery, ajax, onclick

В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.

Библиотека jQuery очень удобный инструмент. Она очень сильно упрощает работу с ajax-запросами, для этого у неё есть специальная конструкция.

Рабочую форму, а так же её создание можно найти в другой нашей статье Простая форма обратной связи своими руками. Или сразу скачать готовый пример из той статье:

Так, как мы работаем с библиотекой jQuery, не забываем подключить её в <head> файла index.html следующей строкой:

<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>

Теперь создадим папку js, в которую поместим наш будущий скрипт в файле под названием ajax.js. Подключаем этот файл в index.html, следующей строкой в <head>:

<script type="text/javascript" src="/js/ajax.js"></script>

Теперь добавим id тэгу <form>, пусть, как бы это не было банально он будет со значением form.

Вот как будет выглядеть наша форма теперь:

	<form action="send.php" method="get" id="form">
		<input type="text" placeholder="Введите сюда e-mail" name="e-mail"><br>
		<input type="text" placeholder="Введите сюда ваше имя" name="name"><br>
		<input type="submit" value="Нажмите, чтобы отправить письмо">
	</form>

Открываем файл ajax.js и добавляем туда следующий код:

/* Ajax-запрос */

function SendPost() // Наша функция, которая будет осуществлять ajax-отправку
{
       jQuery.ajax({	// Начала конструкции для работы с Ajax через jQuery
                type: "GET", // Метод, которым получаем данные из формы
                url: "/send.php", // Обработчик формы. 
                data: jQuery("#form").serialize(), // Этот метод, берет форму с id=form и достает оттуда данные
                success: function(html) {	// функция выполняемая при успешном отправлении данных
					jQuery("body").empty();	// очищаем тело документа
					jQuery("body").append("<h2><center>Ваше сообщение успешно отправлено.</center></h2>"); // вставляем сообщение об успехе
                }
        });
}

Если у вас есть базовые знания по JavaScript, то комментарии помогут вам разобраться и полностью понять код выше.

Стоит обратить внимание на 7 строчку, где задается обработчик формы, путь нужно указывать так, чтобы скрипт нашел его, иначе сообщения не будут отправляться и вы будете долго ломать голову - почему. Смотреть то, нашел скрипт или нет, можно в Средствах разработчика любого браузера.

Мы записали функцию, которая будет отправлять данные через ajax, теперь добавим <input> с типом submit событие onClick(Выполняет при нажатии на элемент), по которому и будет вызываться эта функция.

Вот как станет выглядеть форма полностью:

	<form action="send.php" method="get" id="form">
		<input type="text" placeholder="Введите сюда e-mail" name="e-mail"><br>
		<input type="text" placeholder="Введите сюда ваше имя" name="name"><br>
		<input type="submit" value="Нажмите, чтобы отправить письмо" onClick="SendPost();">
	</form>

Если теперь попробовать послать сообщение, то страница всё равно перезагрузится, потому что для <input> с типом submit это заложено в коде по-умолчанию. Проблема решается изменением типа на button:

	<form action="send.php" method="GET" id="form">
		<input type="text" placeholder="Введите сюда e-mail" name="e-mail"><br>
		<input type="text" placeholder="Введите сюда ваше имя" name="name"><br>
		<input type="button" value="Нажмите, чтобы отправить письмо" onClick="SendPost();">
	</form>

Результат работы вы можете проверить на демо-странице (напоминаем, что письмо отсылается на адрес, который вы указали в поле формы):

А исходники скачать по ссылке ниже:

Если у вас есть вопрос, задавайте их в комментариях ниже.

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

Авторизоваться с помощью:

Поиск по сайту

Топ 10 активных пользователей

Имя пользователя Баллы
gawk
44.20
hr@proovelab
15.00
Varvarka
4.00
intuit89
3.40
Akyla58
3.00
AnnaOl
3.00
dimasik_3557
3.00
ErcardSa
3.00
Galinamuh
3.00
Hozephlof
3.00

Рекламные ссылки

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Языки программирования сайтов Просмотров 11421

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее

Как подключить на свой сайт jQuery Просмотров 4215

Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.

Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее

Увеличение изображения при нажатии на не... Просмотров 48875