образовательная корпорация
Создать
Править
Отменить
Вверх

Левое меню

Последние

Изменить меня

1
Вкладки

Асгард сеть

Самарт сеть


http://dontforget.pro/javascript/primer-ajax-otpravki-formyi-na-email-s-pomoshhyu-jquery-i-php/

Пример ajax отправки формы на email с помощью jQuery и php
Январь 12, 2014
48808
99
JavaScript/jQuery, PHP
ajax, GET, события, форма
ajax-logo1

Пока писать не про что, напишу про пример отправки формы на email ajax’ом и приложу пример php-обработчика для нее. По сути тут ничего сложного, но чтобы самому постоянно не искать пример — оставлю его тут.
Значит, алгоритм следующий: заполняем форму, её отправку перехватываем jQuery скриптом, проверяем и обрабатываем данные, отправляем без перезагрузки страницы в обработчик, там все еще раз проверяем, отправляем на email, возвращаем ответ, принимаем его и пишем, что все ок(или не ок), профит.
Обычная html форма

<form method=«post» action=«» id=«ajaxform»> <br />
<input type=«text» size=«32» maxlength=«36» name=«name» placeholder=«Ваше имя» val=«»> <br />
<input type=«text» size=«32» maxlength=«36» name=«email» placeholder=«Ваш email» val=«»> <br />
<input type=«text» size=«32» maxlength=«36» name=«subject» placeholder=«Тема» val=«»> <br />
<textarea cols=«25» rows=«10» name=«message» placeholder=«Сообщение..» val=«»></textarea> <br />
<input type=«submit» value=«GO GO GO»/>
</form>

Тут все просто и понятно, атрибут action пустой ибо в скрипте укажем.
jQuery скрипт-перехватчик

$(document).ready(function() { вся магия после загрузки страницы
$(«#ajaxform»).submit(function(){
перехватываем все при событии отправки

	var form = $(this); // запишем форму, чтобы потом не было проблем с this
	var error = false; // предварительно ошибок нет
	form.find('input, textarea').each( function(){ // пробежим по каждому полю в форме
		if ($(this).val() == '') { // если находим пустое
			alert('Заполните поле "'+$(this).attr('placeholder')+'"!'); // говорим заполняй!
			error = true; // ошибка
		}
	});
	if (!error) { // если ошибки нет
		var data = form.serialize(); // подготавливаем данные
		$.ajax({ // инициализируем ajax запрос
		   type: 'POST', // отправляем в POST формате, можно GET
		   url: 'gogogo.php', // путь до обработчика, у нас он лежит в той же папке
		   dataType: 'json', // ответ ждем в json формате
		   data: data, // данные для отправки
	       beforeSend: function(data) { // событие до отправки
	            form.find('input[type="submit"]').attr('disabled', 'disabled'); // например, отключим кнопку, чтобы не жали по 100 раз
	          },
	       success: function(data){ // событие после удачного обращения к серверу и получения ответа
	       		if (data['error']) { // если обработчик вернул ошибку
	       			alert(data['error']); // покажем её текст
	       		} else { // если все прошло ок
	       			alert('Письмо отвравлено! Чекайте почту! =)'); // пишем что все ок
	       		}
	         },
	       error: function (xhr, ajaxOptions, thrownError) { // в случае неудачного завершения запроса к серверу
	            alert(xhr.status); // покажем ответ сервера
	            alert(thrownError); // и текст ошибки
	         },
	       complete: function(data) { // событие после любого исхода
	            form.find('input[type="submit"]').prop('disabled', false); // в любом случае включим кнопку обратно
	         }
	                  
		     });
	}
	return false; // вырубаем стандартную отправку формы
});

});

Событие error лучше убрать после тестирования для лучшей безопасности.
PHP обработчик

<?php
if ($_POST) { если передан массив POST
$name = htmlspecialchars($_POST[«name»]);
пишем данные в переменные и экранируем спецсимволы

$email = htmlspecialchars($_POST["email"]);
$subject = htmlspecialchars($_POST["subject"]);
$message = htmlspecialchars($_POST["message"]);
$json = array(); // подготовим массив ответа
if (!$name or !$email or !$subject or !$message) { // если хоть одно поле оказалось пустым
	$json['error'] = 'Вы заполнили не все поля! Обмануть решили? =)'; // пишем ошибку в массив
	echo json_encode($json); // выводим массив ответа 
	die(); // умираем
}
if(!preg_match("|^[-0-9a-z_\.]+@[-0-9a-z_^\.]+\.[a-z]{2,6}$|i", $email)) { // проверим email на валидность
	$json['error'] = 'Не верный формат email! >_<'; // пишем ошибку в массив
	echo json_encode($json); // выводим массив ответа
	die(); // умираем
}
function mime_header_encode($str, $data_charset, $send_charset) { // функция преобразования заголовков в верную кодировку 
	if($data_charset != $send_charset)
	$str=iconv($data_charset,$send_charset.'//IGNORE',$str);
	return ('=?'.$send_charset.'?B?'.base64_encode($str).'?=');
}
/* супер класс для отправки письма в нужной кодировке */
class TEmail {
public $from_email;
public $from_name;
public $to_email;
public $to_name;
public $subject;
public $data_charset='UTF-8';
public $send_charset='windows-1251';
public $body='';
public $type='text/plain';
function send(){
	$dc=$this->data_charset;
	$sc=$this->send_charset;
	$enc_to=mime_header_encode($this->to_name,$dc,$sc).' <'.$this->to_email.'>';
	$enc_subject=mime_header_encode($this->subject,$dc,$sc);
	$enc_from=mime_header_encode($this->from_name,$dc,$sc).' <'.$this->from_email.'>';
	$enc_body=$dc==$sc?$this->body:iconv($dc,$sc.'//IGNORE',$this->body);
	$headers='';
	$headers.="Mime-Version: 1.0\r\n";
	$headers.="Content-type: ".$this->type."; charset=".$sc."\r\n";
	$headers.="From: ".$enc_from."\r\n";
	return mail($enc_to,$enc_subject,$enc_body,$headers);
}
}
$emailgo= new TEmail; // инициализируем супер класс отправки
$emailgo->from_email= 'dontforget.pro'; // от кого
$emailgo->from_name= 'Тестовая форма';
$emailgo->to_email= $email; // кому
$emailgo->to_name= $name;
$emailgo->subject= $subject; // тема
$emailgo->body= $message; // сообщение
$emailgo->send(); // отправляем
$json['error'] = 0; // ошибок не было
echo json_encode($json); // выводим массив ответа

} else { если массив POST не был передан
echo 'GET LOST!';
высылаем
}
?>

Тут вся магия в echo json_encode($json), т.е. вывести преобразованный в json формат массив который принимает наш jQuery скрипт и выводит результат.

Супер класс отправки TEmail и функцию mime_header_encode я давно спер на каком-то блоге, сейчас уже не нашел на каком =(, не замарачивайтесь по поводу этого класса и функции — вы можете использовать и обычный вариант mail(), но я всегда использую его и проблем с кодировками никогда не было.

ДЕМО

На этом всё! Всем спасибо, пишите вопросы в комментариях — разберемся!