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(), но я всегда использую его и проблем с кодировками никогда не было.
ДЕМО
На этом всё! Всем спасибо, пишите вопросы в комментариях — разберемся!
Инструменты страницы
