• Главная
• Видеоуроки
• PHP
• JavaScript
• CSS
• HTML
• Сервисы
• Статьи
• Оффтоп

• Главная
• ->
• Материалы
• ->
• Как быстро и просто создать Ajax-форму с использованием JSON-ответов?

Как быстро и просто создать Ajax-форму с использованием JSON-ответов?

Исходники	Пример

В этом уроке мы разберём все шаги по созданию и настройке своей Ajax-формы, которая будет выводить на экран сообщения об успешной отправке письма и сообщения об ошибке заполнения полей.

Для наших целей будем использовать библиотеку jQuery и плагин jQuery Form Plugin, чтобы максимально упростить и ускорить весь процесс.

Краткий обзор на jQuery Form Plugin:

Данный плагин позволит вам просто и ненавязчиво усовершенствовать обычные html-формы до форм с использованием Ajax. Основные методы ajaxForm и ajaxSubmit получают информацию из полей и элементов формы, чтобы определить, что делать дальше – отправлять информацию или же выводить сообщение об ошибке. Оба метода поддерживают множество возможностей, позволяющих осуществлять полный контроль над отправкой данных. Более простого способа использовать Ajax в формах обратной связи просто не существует!

Итак, теперь у вас есть некоторое представление, с чем мы будем работать. Приступим к первому шагу этого урока.

Шаг 1. Создаем HTML-форму

С плагином jQuery Form Plugin вы можете строить достаточно сложные формы, и у плагина не возникнет затруднений в получении и обработке данных посредством Ajax. Однако, сейчас давайте не будем мудрить и создадим что-нибудь попроще.) Пусть это будет форма с полями: «Имя», «email» и текстовым полем для написания сообщения. Все эти поля будут обязательными к заполнению.

Удостоверьтесь, что в вашей форме прописаны атрибуты у тегов, как показано ниже + существует блок для вывода сообщений об успешной отправке или ошибок заполнения полей формы.

<div id="container">
<h1>Contact Us</h1>
	<form method="post" action="submit.php" id="contact-us">
		<div id="contact-us-message"></div>
		<div class="input-box">
			<label>Name</label>
			<input type="text" name="name" />
		</div>
		<div class="input-box">
			<label>Email</label>
			<input type="text" name="email" />
		</div>
		<div class="input-box">
			<label>Message</label>
			<textarea name="message"></textarea>
		</div>
		<div class="submit">
			<input type="submit" value="Submit" />
		</div>
	</form>
</div>

Заметка: id первого тега div это id самой формы + "-message" (см. скриншот ниже)

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

Создайте директорию для вашего проекта и сохраните этот файл как index.php.

Шаг 2. Подключаем файл JavaScript к нашей странице

Убедитесь, что библиотека javaScript и библиотека, идущая вместе с плагином, также были подключены.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="application.js"></script>

Библиотеку, что идёт вместе с плагином, необходимо предварительно сохранить в директорию с файлом index.php.

Шаг 3. Добавляем код в файл application.js

Т.к. самого файла application.js ещё не существует, то создадим этот файл, воспользовавшись любым удобным для этого редактором. Сохраним его под именем application.js в директорию с остальными файлами данного урока.

Вставьте код, что указан ниже, и сохраните файл ещё раз.

function setupAjaxForm(form_id, form_validations){
var form = '#' + form_id;
var form_message = form + '-message';

// включить/отключить кнопку отправки
var disableSubmit = function(val){
	$(form + ' input[type=submit]').attr('disabled', val);
};

// установка сообщения о загрузке
$(form).ajaxSend(function(){
	$(form_message).removeClass().addClass('loading').html('Loading...').fadeIn();
});

// установка плагина Jquery 'ajaxForm'
var options = {
	dataType:  'json',
	beforeSubmit: function(){
		// запустить проверки формы, если они есть
		if(typeof form_validations == "function" && !form_validations()) {
			// предотвратить отправку формы
			return false;
		}
		disableSubmit(true);
	},
	success: function(json){
		$(form_message).hide();
		$(form_message).removeClass().addClass(json.type).html(json.message).fadeIn('slow');
		disableSubmit(false);
		if(json.type == 'success')
			$(form).clearForm();
	}
};
$(form).ajaxForm(options);
}

Первая часть кода содержит функцию setupAjaxForm. Это совсем маленький кусочек кода, но его значение огромно. Здесь происходит установка соответствующих опций для jQuery Form Plugin.

В дополнение, когда кнопка «отправить» была нажата, функция обрабатывает JSON-ответ и отображает результаты выше формы, в области тега div c id равным contact-us-message.

Сейчас нужно инициировать функцию, чтобы сделать форму активной. Для этого в файле application.js пропишем следующие строчки кода.

$(document).ready(function() {
   new setupAjaxForm('contact-us');
});

Итого, файл application.js будет выглядеть следующим образом:

function setupAjaxForm(form_id, form_validations){
var form = '#' + form_id;
var form_message = form + '-message';

// включить/отключить кнопку отправки
var disableSubmit = function(val){
	$(form + ' input[type=submit]').attr('disabled', val);
};

// установка сообщения о загрузке
$(form).ajaxSend(function(){
	$(form_message).removeClass().addClass('loading').html('Loading...').fadeIn();
});

// установка плагина Jquery 'ajaxForm'
var options = {
	dataType:  'json',
	beforeSubmit: function(){
		// запустить проверки формы, если они есть
		if(typeof form_validations == "function" && !form_validations()) {
			// предотвратить отправку формы
			return false;
		}
		disableSubmit(true);
	},
	success: function(json){
		$(form_message).hide();
		$(form_message).removeClass().addClass(json.type).html(json.message).fadeIn('slow');
		disableSubmit(false);
		if(json.type == 'success')
			$(form).clearForm();
	}
};
$(form).ajaxForm(options);
}

$(document).ready(function() {
   new setupAjaxForm('contact-us');
});

Инициация функции обёрнута в обработчик события jQuery, который срабатывает, когда страница загружена.

Шаг 4. Пишем PHP-скрипт для обработки формы

Создаём новый PHP-файл. Назовём его submit.php. Сохраним его в директорию с остальными файлами данного урока. Обработка всех данных будет происходить именно в нем.

Скопируйте код, представленный ниже, и вставьте его в файл submit.php. Пересохраните файл submit.php.

Этот PHP-скрипт очень простой, однако он показывает основы работы обработчика данных массива POST и возврата ответов в формате JSON.

<?php
if($_POST){
// response hash
$response = array('type'=>'', 'message'=>'');

try {
	// do some sort of data validations, very simple example below
	$required_fields = array('name', 'email', 'message');
	foreach($required_fields as $field){
		if(empty($_POST[$field])){
			throw new Exception('Required field "'.ucfirst($field).'" missing input.');
		}
	}

	// ok, field validations are ok
	// now add to data to DB, Send Email, ect.

	// let's assume everything is ok, setup successful response
	$response['type'] = 'success';
	$response['message'] = 'Thank-You for submitting the form!';
} catch(Exception $e){
	$response['type'] = 'error';
	$response['message'] = $e->getMessage();
}
// now we are ready to turn this hash into JSON
print json_encode($response);
exit;
}
?>

Прим. от ред.: к сожалению в данном уроке не разбирается детально код файла submit.php и application.js.

Обязательно проверьте, чтобы в форме, которая была написана нами в файле index.php в атрибуте action в качестве обработчика было указано: submit.php.

Шаг 5. Добавим CSS-стилей

Наш скрипт использует 2 класса: «success» и «error» для установки вывода результатов формы. На этом этапе у вас уже должна быть функционирующая форма, но она уродливая! Потратьте немножко времени, чтобы приукрасить вашу форму в соответствии с вашими потребностями. Если у вас что-то не получилось – скачайте исходники к этому уроку (в верхней части страницы).

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

Материал подготовил Денис Малышок специально для сайта CodeHarmony.ru (по материалам сайта www.tutorialswitch.com)

P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх