Отправка данных формы с помощь AJAX

21.01.2017

Отправлять данные формы без перезагрузки страницы будем с помощью jQuery. Обработку серверной части писать не будем.

Пример формы:

<form id="test_ajax_form" method="post" action="test_handler_form.php">
    <input type="text" name="name" placeholder="Имя">
    <textarea name="message" placeholder="Сообщение" ></textarea>
    <input type="submit" value="Отправить" name="submit">
</form>

Скрипт:

$(document).ready(function(){
	$('#test_ajax_form').on('submit', function(e){
		e.preventDefault();
		var data = $(this).serialize(),
		url = $(this).attr('action');

		$.ajax({
			method: "POST",
			url: url,
			data: data
		}).done(function(){
			alert('Данные успешно отправленны!');
		}).fail(function(){
			alert('Произошла ошибка!');
		});
	});
});

Демо:

Leave a Reply

*

code