Рассмотрим как создается обратная форма на Ajax и PHP для отправки данных с сайта на почту.
Введение
Главной особенностью многих сайтов является контактная форма, можно сказать, что основная суть сайтов в вебе — взаимодействие с пользователями по средствам этих форм. Стандартные формы работают отлично, но мы можем сделать их более приятными и отзывчивыми. Обратная форма на AJAX для отправки данных будет работать в фоновом режиме.
Кроме того, мы будем использовать jQuery, чтобы упростить код JavaScript и простой почтовый скрипт PHP для обработки отправки данных формы на электронную почту.
Этот материал основан на статье от команды TreeHouse.com, которую я дополнил немного от себя. Все необходимые файлы можно будет скачать в конце статьи.
Про саму технологию Ajax (Asynchronous Javascript and XML — «асинхронный JavaScript и XML») вы можете прочитать в Википедии.
Создаем HTML-форму
Любая обратная форма на Ajax начинается с HTML формы, которая будет собирать данные от пользователя.
Назначьте вашему идентификатору (ID) ajax-contact вашей формы <form>, установите post атрибут для method и mailer.php как атрибут action. В целом, это обычная форма на языке разметки HTML и здесь вы не найдете чего-то необычного.
<form id="ajax-contact" method="post" action="mailer.php">
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="field">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="field">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="field">
<button type="submit">Send</button>
</div>
</form>Мы создали простую форму, в которой есть поля для сбора имени пользователя, адреса электронной почты и текста сообщения.
Обратите внимание, что каждое из полей формы имеет атрибут required (необходимый). В браузерах, поддерживающих валидацию форм HTML5, это предотвратит отправку формы до тех пор, пока все поля не будут заполнены.
Затем вам нужно создать элемент <div>, который будет использоваться для отображения пользователю сообщений об успехах и ошибках. Создайте этот элемент над <form> в HTML-разметке и присвойте ему идентификатор form-messages.
Так как наша обратная форма на Ajax в этот <div> мы будем записывать сообщения и выводить их пользователю на экран:
<div id="form-messages"></div>Далее, скачиваем архив с файлами в конце статьи и копируем файл style.css в каталог вашего проекта. Также необходимо добавить элемент <link>, который подключит эту таблицу стилей.
<link rel="stylesheet" href="style.css">Наконец, нужно создать два элемента <script>, которые ссылаются на файлы jquery-2.1.0.min.js и app.js. Добавьте их непосредственно перед закрывающим тегом </body>.
<script src="jquery-2.1.0.min.js"></script>
<script src="app.js"></script>Важно, чтобы вы сначала загрузили файл jquery-2.1.0.min.js, так как код внутри app.js требует jQuery.
Это весь HTML, который вам понадобится в этой статье. Далее давайте посмотрим на JavaScript.
Еще одно замечание — в TreeHouse использовали старый jQuery, и ошибок у вас не возникнет, если вы повторите все действия, описанные в статье. Но ниже я поясню как обновить jQuery и сделать так, чтобы работал код.
Отправка формы с использованием Ajax
Т.к. наша обратная форма на AJAX, то мы не можем без JavaScript. Создайте новый файл в каталоге вашего проекта с именем app.js. Он будет содержать весь код, отвечающий за отправку данных формы с использованием AJAX.
Скопируйте следующий код в файл app.js.
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// TODO: The rest of the code will go here...
});Здесь мы создали две новые переменные, form и formMessages, которые ссылаются на соответствующие элементы в вашей HTML-разметке.
Затем нужно создать элемент отслеживания событий, который будет перехватывать отправление формы submit. Вы можете сделать это, используя метод submit jQuery.
// Set up an event listener for the contact form.
$(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();
// TODO
});Здесь вы передали функцию методу submit, которая будет выполняться при отправке пользователем контактной формы. Вы также сказали браузеру не отправлять форму, как это обычно происходит через метод preventDefault для события.
Далее вам нужно сериализовать данные формы. При этом данные, введенные пользователем в форму, будут преобразованы в строку ключ/значение, которая может быть отправлена с помощью AJAX-запроса. Используйте метод jQuery serialize для сериализации данных формы, а затем сохраните результат в переменной под названием formData.
// Serialize the form data.
var formData = $(form).serialize();Теперь вы готовы написать код, который отвечает за отправку данных формы на сервер и обработку ответа. Скопируйте следующий код в ваш app.js файл:
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})Здесь вы используете ajax-метод jQuery для создания нового AJAX-запроса. Вы передали объект методу ajax, который содержит ряд свойств, используемых для настройки запроса.
Свойство type определяет метод HTTP, который будет использоваться для запроса, в нашем случае POST. Свойство url — это местоположение скрипта, в который будут отправляться данные формы.
Вы заполнили это свойство, извлекая атрибут action формы. Наконец, свойство data было заполнено с помощью переменной formData, которую вы создали ранее.
Далее вам нужно обработать успешный ответ от сервера. Скопируйте следующий код непосредственно после закрывающей скобки вызова AJAX. Обратите внимание, что я намеренно пропустил точку с запятой:
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})Этот выполненный метод будет вызван в случае успешного завершения запроса.
Здесь сначала необходимо убедиться, что элемент formMessages имеет класс success, а затем задать текстовое содержимое этого элемента, используя данные, возвращаемые скриптом mailer. В конце вы очищаете значения каждого из полей формы.
Последний кусочек JavaScript, который нужно написать, управляет тем, что должно произойти в случае ошибки. Скопируйте следующий блок кода в app.js:
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});Метод fail (сбой) вызывается, если почтовый скрипт возвращает ошибку.
Сначала убедитесь, что элемент formMessages имеет класс error. Затем проверяется, не вернул ли AJAX-запрос какой-либо responseText. Если да, то вы используете этот текст для установки содержимого элемента formMessages; в противном случае используйте общее сообщение об ошибке.
Это завершает создание HTML и JavaScript кода, которые необходимы для построения обратной формы на AJAX. Далее вы узнаете о скрипте почтового сервера, который отвечает за обработку данных формы и отправку электронного письма.
Создание почтового PHP-скрипта
Несмотря на то, что работает наша обратная форма на AJAX мы также будем использовать PHP. Пришло время написать скрипт отправки формы на PHP, который будет обрабатывать данные формы.
Этот простой скрипт отвечает за проверку правильности данных формы и отправку электронного письма. Если произойдет ошибка, сценарий почтовой программы ответит соответствующим кодом состояния, чтобы был выполнен JavaScript-код, который вы написали ранее, в обратном вызове при fail.
Создайте новый файл с именем mailer.php и скопируйте в него следующий код:
<?php
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "hello@example.com";
// Set the email subject.
$subject = "New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>Этот скрипт начинается с проверки того, что запрос был отправлен методом POST. Если это не так, скрипт вернет код состояния HTTP 403 (запрещено) и сообщение об ошибке.
После того, как вы установили, что используется правильный HTTP-метод, вы извлекаете данные формы в три переменные $name, $email и $message. Вы также здесь используете метод PHP trim, чтобы вырезать любые нежелательные пробелы.
Далее вы проверяете, чтобы убедиться, что ни одна из этих переменных не пуста. Если одна или несколько переменных пустые, установите код ответа на 400 (плохой запрос) и верните браузеру сообщение об ошибке.
Теперь, когда вы определили, что данные в порядке, вы готовите письмо, сначала создавая переменную с получателем письма. Затем вы создаете переменные для темы, содержимого письма и, наконец, заголовка письма.
Стандартная функция mail PHP прекрасно подойдет для целей это статьи, но есть более надежные способы отправки электронной почты с использованием PHP.
В принципе, на этом всё, обратная форма на AJAX и PHP должна работать. Откройте ваш HTML-файл в веб-браузере и протестируйте форму. Для полноценной работы вам нужно будет использовать веб-сервер с поддержкой PHP и функцию mail, чтобы все работало правильно.
Обновление jQuery
В первой версии данного урока был использован старый jQuery версии 2.1.0. Если вы используете новую версию, то в файле app.js нужно поменять:
$(function()на
jQuery(function ($)При этом JS будет нормально работать с jQuery вплоть до версии 3.5.1.
HTML для Bootstrap
Если у вас сайт на Bootstrap, то, например, для 3-й версии вы можете использовать HTML форму подобную этой:
<div class="container-fluid grey-back">
<div class="row">
<div class="container">
<div class="col-lg-6 col-lg-offset-3">
<div id="form-messages"></div>
<form id="ajax-contact" method="post" action="/mailer.php">
<div class="form-group">
<input type="email" id="email" name="email" class="form-control input-lg" placeholder="Ваш email" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-primary">Отправить</button>
</div>
</form>
</div>
</div>
</div>
</div>Это лишь пример с одним полем для ввода электронной почты. По аналогии добавьте нужные вам формы, используя стандартные теги Bootstrap.
Теперь точно всё готово! Наслаждайтесь.
Из этой статьи блога вы узнали, как создается обратная форма на AJAX и PHP для связи со скриптом почтового сервера. Мы использовали jQuery для упрощения кода JavaScript, но вы могли бы достичь того же результата со стандартным JavaScript.
Использование AJAX в рамках ваших веб-сайтов позволяет улучшить пользовательский опыт в ряде различных областей, а не только в контактных формах. В следующий раз, когда вы будете создавать сайт, спросите себя, как AJAX может помочь создать более комфортные условия для ваших пользователей.
