Форма обратной связи на ajax

Здравствуйте, сегодня поговорим о том, как создать форму обратной связи, используя ajax.

Для создания обратной связи нам нужно два файла, в одном будет html код и ajax запрос, в другом файле будет php код, который будет отправлять сообщение.

Ну что же приступим, сначала пропишем поля, которые будет заполнять пользователь и кнопку.

<div>
	<labelВаше имя:</label>
	<input type="text" id="pole1"/>
	<labelВаше сообщение:</label>
	<textarea id="pole2"/textarea>
	<span> id="btn">Отправить</span>
	<div class="text"</div>
</div>

Используя css можете оформить этим поля на свой вкус. Я сразу перейду к самому интересному ajax запросу.

<script>
$("#btn").click(function () {
	var p1 = $("#pole1").val();
	var p2 = $("#pole2").val();
	$.ajax({
	type: "POST",
	url: "http://mysite.ru/feedback.php",
	data: "name="+p1+"&text="+p2,
	success: function(){
		$(".text").text("Ваше сообщение отправлено, мы свяжемся с вами в ближайшее время");
	}
	});
});
</script>

Немного пояснения, в type вы указываете способ передачи данных, в нашем случае, это POST.

В url надо написать путь к вашему php файлу.

В data пишут данные, которые вы передаете.

success срабатывает, если запрос успешно выполнен.

Теперь перейдем к файлу feedback.php в нем надо написать код для отправки сообщения.

	$message = "Имя: ".$_POST['name']." ";
	$message .= "Текст: ".$_POST['text'];
	mail("myemail@mail.ru", "Обратная связь", $message);

Принцим работы довольно простой, в нашем скрипте мы сначала получаем данные из полей, а затем передаем их в файл feedback.php и выполняем этот файл.

Если остались вопросы, то пишите.