Форма обратной связи на php+ajax
На днях возникла потребность написать форму обратной связи на php + ajax. Я прекрасно знал как написать серверную часть скрипта обратной связи, но с js я не дружил. Поэтому пришлось приложить усилия и разобраться. В этой статье я расскажу о принципах ajax, и о том как я разрабатывал скрипт обратной связи.
Разобраться по рабочим примерам не получилось, так как в ajax вообще не шарил, и опыта работы с js не было. Мне очень помогла одна книга Бретта Маклафлина, которая называется “Изучаем Ajax“.
Книга написана простым языком. Почти на каждой станице нарисованы подробные схемы потоков данных при асинхронных запросах. В книге все разложено по полочкам, все разбирается на примерах. Рекомендую книгу всем!
Книга в электронном виде представляет собой сканированные страницы русского издательства книги “Изучаем ajax”, упакованные в файл формата pdf. Поэтому объем книги внушительный – более 100МБ.
Верстаем html форму.
Сделаем кнопочку, при нажатии на которую появляется блок с элементами формы обратной связи. В форме будет 4 поля: “Имя”, “Телефон”, “Что интересует”, “Желаемое время звонка”. А также кнопка, которая при нажатии будет вызывать функцию getData(), написанную на js.
<html> <head> <script src="ajax.js"></script> </head> <body> <a href="javascript:void(0);" onClick="callbackw();"> <img src="button.gif" border="0" width="101" height="40" align="right"></></a> <div id="callback" style="padding:10px; z-index:2024; display:none; background:#F1F5E2; position:absolute; top:41px; right:0px; text-align:left; border:1px solid #ccc;"> <form id="cbform" action="send.php" method="post"> <table> <tr> <td align="right"><b>Имя</b></td> <td><input type="text" name="name" id="nm" style="width:300px;"></td> </tr> <tr> <td align="right"><b>Телефон</b></td> <td><input type="text" name="telefon" id="tel" style="width:300px;"></td> </tr> <tr> <td align="right"><b>Что интересует</b></td> <td><input type="text" name="interes" id="itrs" style="width:300px;"></td> </tr> <tr> <td align="right"><b>Желаемое время звонка</b></td> <td><input type="text" name="time" id="tm" value="" style="width:300px;"></td> </tr> <tr> <td> </td> <td> <input type="button" value="Отправить" id="butt" onClick="getData()"> </td> </tr> </table> <img src="loader.gif" id="loading" style="display:none"> <span id="status"></span> </form> </div> <div id="result" style="padding:10px; z-index:2024; display:none; background:#F1F5E2; position:absolute; top:41px; right:0px; text-align:left; border:1px solid #ccc;"> </div> </body> </html>
С версткой разобрались. Теперь давайте разбираться с принципами ajax. Функции js находятся в файле
<script src="ajax.js"></script>
Реализация принципов ajax.
Итак, мы дошли до того места, которое и послужило причиной написания статьи. Что же такое AJAX?
AJAX расшифровывается как Asynchronous Javascript and XML, что в переводе на русский означает асинхронный ява скрипт и XML. Что значит асинхронный?
Допустим у нас скрипт голосования. Вы ставите оценку какой-нибудь фотки или статье и нажимаете кнопку, при нажатии которой ваш голос приплюсовывается к имеющимся и идет пересчет процентов всех оценок. Получается на странице обновляется всего несколько цифр.
Так вот синхронная загрузка в данном случае – это когда скрипт закончит свою работу по пересчету и обновлению данных для голосования, вся страница формируется заново с новыми данными. А асинхронная – это посылка запроса скрипту, ожидание от него ответа, обновление конкретных данных (в нашем случае изменившихся чисел) на странице, сама страница при этом не обновляется. Преимущество такого подхода в том, что во-первых пользователю не надо ждать, пока скрипт закончит свою работу и заново сформирует всю страницу, а во-вторых такой подход снижает нагрузку на сервер, так как ему не приходиться генерировать текущую страницу заново.
При использовании ajax браузер посылает запросы и данные серверу, и он же получает от сервера ответы и данные. Рассмотрим теперь содержание файла “ajax.js”
var cbwStatus = 0; var request = null; function callbackw() { if (cbwStatus == 1) { document.getElementById('callback').style.display='none'; document.getElementById('result').style.display='none'; cbwStatus = 0; document.getElementById('status').innerHTML = ''; } else { document.getElementById('callback').style.display=''; cbwStatus = 1; } } function createRequest(){ try{ request = new XMLHttpRequest(); } catch (trymicrosoft){ try{ request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft){ try{ request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed){ request = null; } } } if (request == null) alert('Ошибка'); } function getData(){ if (document.getElementById('nm').value != '' && document.getElementById('tel').value != '' && document.getElementById('itrs').value != '' && document.getElementById('tm').value != '' ){ createRequest(); var url = 'send.php'; var form_data = '?name=' + document.getElementById('nm').value + '&telefon=' + document.getElementById('tel').value + '&interes=' + document.getElementById('itrs').value + '&time=' + document.getElementById('tm').value; request.open("GET",url + form_data,true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded, charset=utf-8'); request.onreadystatechange = updatePage; request.send(null); } else{ document.getElementById('status').innerHTML = "Заполнены не все поля формы"; } } var status_change = true; function updatePage(){ if (request.readyState == 4){ document.getElementById('callback').style.display='none'; document.getElementById('loading').style.display = "none"; document.getElementById('result').style.display=''; document.getElementById('result').innerHTML = request.responseText; status_change = true; } else if(status_change==true){ document.getElementById('status').innerHTML = "Идет отправка сообщения"; document.getElementById('loading').style.display = "inline"; status_change = false; } }
Рассмотрим теперь реализацию ajax в деталях:
Создаем объект класса XMLHttpRequest() в котором есть все необходимые свойства и методы для реализации ajax:
request = new XMLHttpRequest();
Однако для браузеров Internet Explorer необходимо создавать объекты других классов:
request = new ActiveXObject("Msxml2.XMLHTTP");
request = new ActiveXObject("Microsoft.XMLHTTP");
Итак, необходимый объект, для работы данного браузера с ajax создан. Теперь инициализируем необходимые свойства и вызываем необходимые функции объекта request:
request.open("GET",url + form_data,true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded, charset=utf-8'); request.onreadystatechange = updatePage; request.send(null);
Подробную информацию о работе методов XMLHttpRequest можете узнать из вышеуказанной книги “Изучаем Ajax”.
request.onreadystatechange = updatePage; указывает на функцию, которая будет обрабатывать данные, приходящие с сервера.
В свойстве request.readyState находится число от 0 до 4, которое указывает на текущий статус обработки запроса. Если .readyState равен 4, то работа скрипта закончена, все данные с сервера получены.
Специально не описывал здесь подробности. Это статья – демонстрация примера. Все мельчайшие подробности вы можете узнать, прочитав вышеуказанную книгу, а после прочтения разобрать мой рабочий пример 
Серверная часть:
Код серверной части богат комментариями, поэтому не буду описывать код. Сервер возвращает браузеру все, что скрипт выводит на экран. И содержимое, которое выводит скрипт оказывается в переменной request.responseText.
<?php //Адрес, на который должны приходить письма $site_email = 'yourtestmail@gmail.com'; //Емэил в заголовке From $from_email = 'yoursite@site.ru'; //Проверяем все ли переменные на месте if (!(isset($_GET['name']) && isset($_GET['telefon']) && isset($_GET['interes']) && isset($_GET['time']))) {die('Ошибка в данных!');} $now = date ("d.m.Y H:m:s"); //Фильтруем $name = htmlspecialchars($_GET['name']); $telefon = htmlspecialchars($_GET['telefon']); $interes = htmlspecialchars($_GET['interes']); $time = htmlspecialchars($_GET['time']); //Перекодируем полученные данные в win-1251 $name = iconv('UTF-8', 'windows-1251', $name); $telefon = iconv('UTF-8', 'windows-1251', $telefon); $interes = iconv('UTF-8', 'windows-1251', $interes); $time = iconv('UTF-8', 'windows-1251', $time); $subject = 'Заказ обратного звонка '.$now.' от '.$name; //Строим тело и загаловки $message .= 'Имя: '.$name.'<br/>'; $message .= 'Номер телефона: '.$telefon.'<br/>'; $message .= 'Что интересует: '.$interes.'<br/>'; $message .= 'Желаемое время звонка: '.$time.'<br/>'; $message .= 'Дата подачи заявки: '.$now; $un = strtoupper(uniqid(time())); $ot = "=?windows-1251?B?" . base64_encode($name) . "?= <".$from_email.">"; $head = "From:$ot\n"; $head .= "Mime-Version: 1.0\n"; $head .= "Content-Type:multipart/mixed;"; $head .= "boundary=\"----------" . $un . "\"\n\n"; $body = "------------".$un."\nContent-Type:text/html;\n"; $body .= "Content-Transfer-Encoding: 8bit\n\n".$message."\n\n"; //Ну и в путь дорогу if (mail($site_email, $subject, $body, $head)){echo 'Сообщение отправлено';} else {echo 'При отправки сообщения возникла ошибка!';} ?>
Скачать скрипт обратной связи на php + ajax
На днях я координально доработал свою форму обратной связи и решил сделать ее платной. Стоимость моей формы обратной связи: 1$ (около 30 рублей).
Вы можете скачать мой скрипт Обратной связи на php+ajax, а затем оплатить его по sms. Если Вам неудобно платить по смс, свяжитесь со мной и мы договоримся об оплате через другие платежные системы.
Скачать скрипт обратной связи на php+ajax
Демонстрацию формы обратной связи можете посмотреть здесь
Описание новой версии формы обратной связи
А также я предлагаю услуги по модификации скрипта обратной связи специально для Вашего сайта всего за $5. Чтобы связаться со мной – откройте страницу “Контактная информация” и свяжитесь со мной удобным для Вас способом. Или напишите заявку в комментарии к этой статье.