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