ru

Ajax-форма без перезагрузки страницы

Назад к статьям
Создать форму:

Обратная связь на сайте, перезагружающая страницу после каждой успешной отправки — мелочь, которая легко портит впечатление о сайте. Качественный сайт подобных «дырок» содержать не должен, потому разберём простой пример формы с асинхронной отправкой данных (без перезагрузки страницы) через AJax и JQuery.

Отправка формы без перезагрузки страницы:

  • не дезориентирует пользователя ненужной перезагрузкой страницы или редиректом,
  • позволяет ему продолжить навигацию по текущей странице,
  • снижает нагрузку на сервер,
  • работает приятней и «плавнее».

Как отправить форму без перезагрузки всей страницы? Просто отправлять нужные данные на сервер отдельными запросами, не затрагивая html. 

AJAX + PHP + JQuery

Обычно «фидбэк» состоит из HTML-разметки, простенького скрипта, отправляющего данные на сервер и PHP-обработчика этих данных. В случае с фоновой отправки нам понадобится настроить ассинхронную отправку данных к обработчику. Самая простая связка для форм без перезагрузки страницы это PHP + Ajax. 

Итак, чтобы отправить форму без перезагрузки дополнительно понадобится:

  • ajax-запрос — функция JavaScript, делающая асинхронную отправку введённых в форму данных к обработчику.
  • PHP-обработчик на сервере, который асинхронно обрабатывает переданные ему Ajax’ом данные. После обработки посылает скрипту ответ с результатом, Вам — заявку.
  • JQuery — библиотека для работы с JavaScript. При создании ajax-формы удобнее пользоваться ей, как и при работе с JS во многих других случаях.

Функцию Ajax можно использовать не только создания форм, но и для других задач, например для динамической подгрузки новостей на странице.

Готовая схема выглядит так:

Пользователь нажатием кнопки отправляет данные

↓

файл JS отправляет их в PHP через Ajax, функцию JQuery

↓

обработчик.PHP проверяет данные и возвращает пользователю через тот же скрипт сообщение об ошибке или успехе 

↓

в первом случае владелец сайта также получает готовую заявку.

Если необходимо исключить вероятность повторной отправки формы, ее можно скрыть.

Инструкция по созданию формы без перезагрузки

Прежде всего подключаем JQuery — вставляем строку в конце head сайта (перед тегом </head>). 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Делаем простую форму (в тегах <!--- --- > закрыты комментарии к коду, их желательно удалить):

<div id="results"> </div> <!-- блок с результатами отправки формы можно оформить и поставить на месте формы, если она скрывается -->
<form id="formx" onsubmit="call()"> <!--- вызов JavaScript события --->
<legend>Оставить заявку</legend> 
<label for="name">Ваше имя:</label><input id="name" name="name" value="" type="text"> <!---далее три строчка с полями--->
<label for="email">Ваш E-mail:</label><input id="email" name="email" value="" type="text">
<label for="phone">Ваш телефон:</label><input id="phone" name="phone" value="" type="text">
<input value="Отправить" type="submit"> 
</form>

Если вывод формы нужен на одной странице, просто вставляем в код <body>. Если вывод нужен по всему сайту или на многих страницах — вышеописанный код вставляется в шаблон.

Собираем Java-Script. Его, можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки. 

<script type="text/javascript">
	function call() {
	  var msg   = $('#formx').serialize();
       $.ajax({
         type: 'POST',
         url: 'formx.php', //обращаемся к обработчику
         data: msg,
        success: function(data) {  //в случае успеха выводим результаты в div "results"
            $('#formx').remove(); //скрываем форму после отправки 
            $('#results').html(data); //показываем сообщение об успехе вместо неё 
         },
         error:  function(xhr, str){ //ошибка выводит соответствующее сообщение 
	    alert('Возникла ошибка: ' + xhr.responseCode);
         }
       });
   }
</script>

Обработчик, в JS элементе выше мы уже назвали его formx.php:

<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') //проверка на асинхронность
	{
    if (isset($_POST["name"]) && isset($_POST["email"]) ) 
	{ 
    if ($_POST['name'] == '') 
    {
        echo 'Не заполнено поле Имя';
        return; //проверяем наличие обязательных полей
    }
    if ($_POST['email'] == '') 
    {
        echo 'Не заполнено поле E-mail';
        return;
    } 

    $name = $_POST['name'];
    $email = $_POST['email'];
mail("[email protected]", "Заявка с сайта", "Имя:".$name.". E-mail: ".$email ,"From: [email protected] \r\n"); //здесь делаем отправку заявки на почту. не забудьте поменять оба адреса
        echo 'Заявка отправлена!';
    	return; //возвращаем сообщение пользователю
    }
    }
?>

Файл formx.php закидываем в корневой каталог сайта (или прописываем соответствующий путь в url: нашего скрипта. JS-код размещается либо в head страницы, либо вместе с html. 

Как видите, всё довольно просто — сделав всё в точности по инструкции, Вы получите простую, но рабочую форму на JQuery без перезагрузки страницы. Если что-то не получилось — задавайте вопросы в комментариях ниже, мы поможем.

Асинхронная отправка — далеко не всё что потребуется сделать, если Вам нужна крутая и красивая форма без перезагрузки страницы. Обязательно придётся подключать стили оформления, настраивать скрытие отправленной формы, показа сообщений об успехе/отказе. Не говоря уже о валидации полей, масках полей, интеграциях с CRM, отправке достижения целей в метрику и настройке капчи.

Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так). 

Назад к статьям