Элегантно оформленный сайт, наполненный привлекательным контентом, очень мало стоит без заинтересованной аудитории. Подписка на рассылку является одним из наиболее эффективных способов установления контакта с вашей аудиторией и привлечения повторного трафика на ваш сайт. Если посетители пользуются вашим сайтом и доверяют ему, они, вероятно, будут доверять вам свои адреса электронной почты — в конце концов, они захотят получать информацию о новых продуктах, статьях или другой соответствующей информации. Это отличный способ наладить отношения с пользователями вашего сайта и поощрять их возвращаться на ваш сайт снова и снова.
В этой статье мы научимся использовать AJAX для принятия подписок на ваш список рассылки без обновления страницы; При таком подходе процесс регистрации будет быстрым и безболезненным. Наша форма регистрации AJAX также сможет принимать подписки от посетителей, которые не используют современные браузеры с поддержкой AJAX.
В этой статье предполагается, что ваш список рассылки хранится в базе данных MySQL, но если у вас есть необходимый код для добавления адресов в ваш собственный список рассылки, вам будет легко адаптировать код, представленный в этой статье, к вашей собственной регистрации процесс.
Прежде чем мы начнем, загрузите код и посмотрите, что мы рассмотрим в этом руководстве.
Большая картина
Наша система регистрации в рассылке состоит из трех ключевых компонентов:
- HTML-форма внутри страницы PHP получает адрес электронной почты посетителя.
- JavaScript будет прослушивать отправку формы, что вызовет вызов AJAX на сервер с адресом электронной почты.
- Простая страница PHP на сервере получит адрес. Он проверит адрес электронной почты на наличие ошибок, а затем сохранит адрес в базе данных MySQL. Сообщение об успехе или ошибке будет отправлено обратно на HTML-страницу для обратной связи с пользователем.
Мы также обеспечим доступность всех этих функций регистрации, написав регистрацию на основе PHP для пользователей, у которых в браузерах не включен JavaScript.
Чтобы упростить кодирование AJAX в нашей системе, мы будем использовать популярную библиотеку JavaScript Prototype для прослушивания отправки форм и обработки сообщений AJAX. Если вам нужен учебник по Prototype, ознакомьтесь со статьями Дэна Уэбба « Безболезненный JavaScript с использованием Prototype» и Кубок мира по библиотеке JavaScript .
Функция формы продолжается
Нашим первым шагом является создание формы, которая будет получать адрес электронной почты; затем мы подключимся к файлам JavaScript, чтобы обеспечить функциональность. Вот как выглядит форма:
<form id="addressForm" action="index.php" method="get"> <fieldset> <legend>Join our mailing list!</legend> <p> <input type="text" name="address" id="address" /> <input type="submit" value="Sign Up" /> </p> <p id="response"><?php echo(storeAddress()); ?></p> </fieldset> </form> Сама форма довольно проста. У нас просто есть текстовое поле, чтобы принять адрес электронной почты пользователя, и кнопку отправки, чтобы активировать функцию AJAX. Идентификатор формы будет иметь решающее значение, поскольку он позволит нашему JavaScript прослушивать отправку.
Заметьте в форме абзац, содержащий выходные данные функции PHP с именем storeAddress ? Это сердце нашей доступной формы регистрации. Когда страница загружается в первый раз, storeAddress возвращает один неразрывный пробел, так что абзац кажется пустым. Позже, когда наша функциональность AJAX будет вызвана отправкой пользователем адреса электронной почты, JavaScript вставит сообщение в этот абзац, чтобы сообщить пользователю, что происходит. В качестве альтернативы, если у пользователя не включен JavaScript в браузере, форма будет отправлена, что приведет к повторной загрузке этой страницы. Это действие приведет к повторному выполнению storeAddress . И на этот раз он вернет сообщение для отображения внутри абзаца.
В начале страницы мы будем ссылаться на библиотеку Prototype с <script> . Мы также mailingList.js ссылку на mailingList.js , который мы рассмотрим ниже:
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/mailingList.js"></script>
Прелесть этой настройки в том, что структура страницы полностью изолирована от ее функциональности, что делает процесс разработки и обслуживания беспроблемным.
Использование AJAX для доставки адреса
Внутри папки js , наряду с файлом prototype.js , находится файл с именем mailingList.js . Этот файл содержит код, который управляет функциональностью AJAX, специфичной для этой страницы. Нашим первым делом в этом файле является добавление прослушивателя событий в событие submit элемента form , которое инициирует вызов AJAX на сервер. Однако мы не можем сделать это прямо сейчас — нам нужно подождать, пока страница загрузится, о чем свидетельствует событие load объекта окна.
Чтобы добавить этих слушателей событий, мы будем использовать удобный метод observe Prototype. Сначала мы добавляем прослушиватель для события load страницы. Внутри этого слушателя мы присоединяем слушателя события к событию submit нашей формы:
// Attach handler to window load event Event.observe(window, 'load', init, false); function init() { // Attach handler to form's submit event Event.observe('addressForm', 'submit', storeAddress); }
Обратите внимание, что прослушиватель событий для нашей формы будет вызывать функцию JavaScript storeAddress при storeAddress формы. Эта функция storeAddress содержит JavaScript для вызова AJAX нашего скрипта PHP. Вот как это выглядит:
function storeAddress(e) { // Update user interface $('response').innerHTML = 'Adding email address...'; // Prepare query string and send AJAX request var pars = 'address=' + escape($F('address')); var myAjax = new Ajax.Updater('response', 'ajaxServer.php', {method: 'get', parameters: pars}); // Stop form from submitting when JavaScript is enabled Event.stop(e); }
Эта функция очень проста. Он начинается с сообщения пользователю о том, что что-то происходит, с отображением сообщения «Добавление адреса электронной почты…». Затем мы собираем информацию из формы при подготовке к отправке запроса AJAX. Обратите внимание, как мы получаем доступ к содержимому текстового поля, используя функцию $F Prototype, которая захватывает значение данного элемента формы, когда предоставляется идентификатор этого элемента формы. Мы используем функцию escape JavaScript для преобразования пользовательского ввода в формат Unicode; таким образом, его URL-адрес готов для доставки в скрипт PHP через метод GET .
Затем следует самая важная часть этой функции: создание нового объекта Ajax.Updater . Когда мы создаем объект Ajax.Updater , мы передаем ему несколько параметров, в том числе:
- идентификатор элемента, в котором вы хотите показать ответ от сервера
- URL скрипта PHP
- данные, которые вы хотите отправить на серверный скрипт, и способ доставки (т.е.
POSTилиGET)
Ajax.Updater отправит адрес электронной почты на сервер и терпеливо ждет ответа. Получив ответ, он отобразит его вместо сообщения «Добавление адреса электронной почты…», которое мы вставили в начале метода. Наконец, мы вызываем Event.stop (еще одну функцию, предоставляемую библиотекой Prototype), чтобы остановить фактическую отправку формы на сервер.
Настройте базу данных списка рассылки
Прежде чем мы сможем написать PHP для хранения адресов электронной почты, нам нужно место для их размещения. Этот SQL создаст для вас таблицу с именем mailinglist :
CREATE TABLE `mailinglist` ( `id` INT NOT NULL AUTO_INCREMENT , `email` TEXT NOT NULL , PRIMARY KEY ( `id` ) );
В архив кода входит файл PHP с именем createTable.php , который создаст эту таблицу для вас. Однако перед запуском этого файла вам необходимо обновить файл dbConstants.php сведения о вашей базе данных MySQL. Я предлагаю вам обновить этот файл сейчас, так как мы будем использовать эти константы в следующем разделе.
Хранение адреса электронной почты
Мы настроили все для доставки адреса на сервер; теперь PHP завершит процесс, сохранив адрес в вашей базе данных и вернув строку в наш объект Ajax, чтобы указать на успех или неудачу. Давайте посмотрим на файл ajaxServer.php в который отправляется адрес электронной почты.
<?php require_once("inc/storeAddress.php"); echo(storeAddress()); ?>
Этот очень простой PHP-скрипт вызывает функцию с именем storeAddress и возвращает объекту Ajax сообщение, которое возвращает storeAddress . Общение с объектом Ajax так же просто, как печать строки.
Первое, что делает storeAddress , это инициализирует переменную с именем $message в неразрывный пробел. Затем он проверяет, получил ли скрипт адрес электронной почты в строке запроса. Если это не так, мы оставим переменную $message установленной как неразрывный пробел. $message будет возвращено вызывающей стороне в конце этой функции.
function storeAddress() { $message = " "; // Check for an email address in the query string if( !isset($_GET['address']) ){ // No email address provided }
Как только мы убедимся, что у нас есть адрес электронной почты для работы, мы хотим убедиться, что это действительный адрес. Мы будем использовать регулярное выражение для поиска некоторых буквенно-цифровых символов, за которыми следует символ @, дополнительные буквенно-цифровые символы, точка и еще несколько буквенно-цифровых символов. Если этот тест не пройден, мы установим для $message об ошибке, информирующее пользователя о том, что введенный адрес электронной почты недействителен:
else { // Get email address from the query string $address = $_GET['address']; // Validate Address if(!preg_match("/^[_a-z0-9-]+(.[_a-z0-9-]+)*@ [a-z0-9-]+(.[a-z0-9-]+)*$/i", $address)) { $message = "<strong>Error</strong>: An invalid email address was provided."; }
Если адрес пройдет этот тест, мы сохраним его в базе данных. Для этого мы подключаемся к MySQL, выбираем базу данных и запускаем наш запрос INSERT . Если адрес был сохранен правильно, мы устанавливаем $message в $message об успехе; в противном случае мы устанавливаем $message в $message об ошибке.
else { // Connect to database $con = mysql_connect(DBHOST ,DBUSER, DBPASS); mysql_select_db(DBNAME, $con); // Insert email address into mailinglist table $result = mysql_query("INSERT INTO mailinglist SET email='" . $address . "'"); if(mysql_error()){ $message = "<strong>Error</strong>: There was an error storing your email address."; } else { $message = "Thanks for signing up!"; } }
Наконец, мы возвращаем $message в ajaxServer.php :
} return $message; }
Теперь загрузите страницу, введите свой адрес электронной почты и отправьте форму — вы увидите, что ваш адрес электронной почты добавлен в таблицу mailinglist рассылки без перезагрузки страницы. Даже если вы отключите JavaScript, страница будет работать очень похожим образом, за исключением того, что вместо вставки вывода storeAddress на страницу динамически с использованием JavaScript, она вставляется непосредственно в HTML-код PHP страницы.
AJAX действительно делает регистрацию в вашем списке рассылки кусочком пирога. Не нужно ждать перезагрузки страницы, что прерывает работу вашего посетителя, и нет необходимости исключать тех, кто просматривает с отключенным JavaScript. Prototype делает процесс создания функциональности AJAX быстрым и безболезненным, что позволяет вам поддерживать тесную связь с поклонниками вашего сайта.