Ajax-форма без перезагрузки страницы
Обратная связь на сайте, перезагружающая страницу после каждой успешной отправки — мелочь, которая легко портит впечатление о сайте. Качественный сайт подобных «дырок» содержать не должен, потому разберём простой пример формы с асинхронной отправкой данных (без перезагрузки страницы) через AJax и JQuery.
Отправка формы без перезагрузки страницы:
Как отправить форму без перезагрузки всей страницы? Просто отправлять нужные данные на сервер отдельными запросами, не затрагивая html.
AJAX + PHP + JQuery
Обычно «фидбэк» состоит из HTML-разметки, простенького скрипта, отправляющего данные на сервер и PHP-обработчика этих данных. В случае с фоновой отправки нам понадобится настроить ассинхронную отправку данных к обработчику. Самая простая связка для форм без перезагрузки страницы это PHP + Ajax.
Итак, чтобы отправить форму без перезагрузки дополнительно понадобится:
Функцию Ajax можно использовать не только создания форм, но и для других задач, например для динамической подгрузки новостей на странице.
Готовая схема выглядит так:
Пользователь нажатием кнопки отправляет данные
файл JS отправляет их в PHP через Ajax, функцию JQuery
обработчик.PHP проверяет данные и возвращает пользователю через тот же скрипт сообщение об ошибке или успехе
в первом случае владелец сайта также получает готовую заявку.
Если необходимо исключить вероятность повторной отправки формы, ее можно скрыть.
Инструкция по созданию формы без перезагрузки
Прежде всего подключаем JQuery — вставляем строку в конце head сайта (перед тегом ).
Делаем простую форму (в тегах закрыты комментарии к коду, их желательно удалить):
Собираем Java-Script. Его, можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки.
Обработчик, в JS элементе выше мы уже назвали его formx.php:
Файл formx.php закидываем в корневой каталог сайта (или прописываем соответствующий путь в url: нашего скрипта. JS-код размещается либо в head страницы, либо вместе с html.
Как видите, всё довольно просто — сделав всё в точности по инструкции, Вы получите простую, но рабочую форму на JQuery без перезагрузки страницы. Если что-то не получилось — задавайте вопросы в комментариях ниже, мы поможем.
Асинхронная отправка — далеко не всё что потребуется сделать, если Вам нужна крутая и красивая форма без перезагрузки страницы. Обязательно придётся подключать стили оформления, настраивать скрытие отправленной формы, показа сообщений об успехе/отказе. Не говоря уже о валидации полей, масках полей, интеграциях с CRM, отправке достижения целей в метрику и настройке капчи.
Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так).
Как отправить HTML-форму без перезагрузки страницы
Что такое AJAX
При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.
Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.
Разберемся как без перезагрузки страницы выполнить отправку данных формы при помощи Ajax
Здесь мы создадим демо-проект, который будет включать в себя 3 файла:
Создайте первый файл под названием index.php с таким содержимым:
Выводы
Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код работы с AJAX, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.
Отправка произвольной формы на AJAX без перезагрузки страницы
Технология AJAX используется для того, чтобы с помощью javascript отправлять «фоновые» http-запросы, что позволяет не перезагружать страницу, как это происходит при обычной отправке форм.
Не зависимо от используемой библиотеки, основные принципы отправки даных с помощью Аякса будут едиными. Я буду всё показывать на примере jQuery. В конце статьи вы найдете ссылку на zip-архив со всеми примерами.
Что можно отправлять через AJAX
Многие думают, что отправке подлежит только форма. Но на самом деле, отправлять можно любые данные. По большому счёту форма как таковая даже не нужна, можно разместить поля ввода (input, textarea и т.п.) в любых местах страницы: перед отправкой просто сформировать из них данные.
На практике стараются использовать именно форму, поскольку это значительно упрощает формирование данных: перед отправкой они просто кодируются (серилизуются) и в таком виде отправляются на сервер.
Общая схема работы
Почти всегда это происходит так:
Дополнительно, при получении ответа, часто скрывают форму, чтобы исключить её повторную отправку.
Начальный код
Вначале сформируем каркас HTML. Я использую UniCSS с готовыми CSS-классами. Также подключаю jQuery в секцию HEAD.
Теперь создадим простую форму и блок ответа.
Первые особенности
В первую очередь обратите внимание, что форма не имеет привычных атрибутов method и action. Формально никто не мешает их указать, но в реальности они будут использоваться только, если будет обычная, а не аякс-отправка. При аякс-отправке нам нужны будут лишь данные формы, а метод и адрес отправки задаются уже в js-коде. Из-за этого мы используем только атрибут id, по которому и сможем идентифицировать форму.
Кнопка имеет тип submit. На самом деле это не обязательно, поскольку главное это просто как-то отреагировать на нажатие кнопки, а это может быть не только submit, но и click. Тип submit удобен тем, что кнопка располагается внутри формы, а значит можно будет перехватить её отправку без дополнительной идентификации.
Но, если кнопку разместить вне формы (если стоит такая задача), то submit сработает не совсем корректно. Особенно если на странице несколько форм, возникнет неопределенность. В этом случае тип кнопки определяют как button (то есть она ничего не делает), и при этом присваивают ей идентификатор id. Например так:
Дальше в js-коде нужно будет перехватывать не submit (формы), а click (кнопки).
Блок #my_message служит для вывода ответа.
Если используется форма, то лучше всё-таки использовать именно submit, поскольку отправка формы может происходить и без нажатия на кнопку: Enter на любом текстовом input-поле. Это типовое поведение браузеров.
Первый вариант (submit)
При отправке формы при нажатии на submit-кнопку формы, возникает одноименное событие, которое мы и перехватываем. На jQuery это будет выглядеть так:
Функции для AJAX
То есть указывается тип запроса (method), адрес обработчика (url), данные (data, обычно в JSON-формате), а также функции, которые реагируют на ответ (в этом примере done).
Привожу полный код, чтобы вы не запутались:
Обработчик размещаем в файле post.php в таком виде:
То есть он пока ничего не делает, а просто выдаёт текст.
Здесь важный момент: адрес обработчика указывается так, чтобы он был доступен по http-адресу. Грубо говоря, адрес можно вбить в браузер. Это особенно актуально, когда используется сложная структура страниц или js-файл выносится в отдельный каталог. В некоторых случаях оптимальным будет указать полный http-адрес к php-файлу, например http://сайт/post.php. Перед тем, как работать с аякс-запросом, убедитесь в корректности адреса обработчика, иначе запрос уйдёт «в никуда», а вы будете гадать, почему он не работает.
Ответ от сервера мы получаем в виде простого текста, поэтому мы его просто выводим в блоке #my_message как есть.
Второй вариант (button)
Теперь рассмотрим второй вариант — отправку данных с помощью произвольного элемента по клику.
Как видите, принципиально здесь ничего не поменялось, кроме того, что мы отслеживаем click на кнопке #my_form_send (которая не обязательно может быть кнопкой, а например блоком span).
Какой вариант использовать, зависит от задач вёрстки. В некоторых случаях кнопку отправки нужно вынести за пределы формы и в этом случае придется использовать click-вариант.
PHP-обработчик
Давайте немного изменим обработчик, чтобы он выдавал какую-то отладочную информацию, например входящий post-запрос.
Здесь без труда угадываются поля форм.
Произвольные данные для отправки
Отправка данных происходит в специальном (серилизованном) формате. Функция jQuery serialize() собственно и приводит данные формы к этому формату, а на стороне сервера, PHP сам сформирует обычный массив. Всё это происходит в фоновом режиме, поэтому дополнительные преобразования не нужны.
Рассмотрим вариант, когда нужно отправить не форму, а какие-то произвольные данные, наример массив данных.
Если вместо фрагмента
то php-обработчик покажет пустой массив. То есть данные не прошли. Для того, чтобы данные были получены их следует оформить:
Более удобным (и распростанённым) будет второй вариант который представляет собой привычный js-объект/массив:
Таким нехитрым способом можно отправлять любые данные на сервер, при том, что от формы можно вообще отказаться. Приведу пример, где все поля ввода могут быть расположены произвольно, при том, что отправка происходит по клику на ссылке:
Приём сложных данных от сервера
Теперь рассмотрим случай, когда сервер должен вернуть не просто текст, а какие-то данные, например массив.
Для этого в php-скрипте следует отдавать специально преобразованный в JSON-формат php-массив. К счастью разработчики PHP всё уже предусмотрели. 
Пусть у нас обработчик будет post-json.php :
Обработка входящих данных на сервере
Теперь рассмотрим вопросы приёма данных на сервере. Поскольку обработчик доступен прямо из браузера, то его следует как-нибудь защитить от прямого вызова. Полноценно сделать это можно в рамках CMS или php-фреймворка, вроде LPF, поэтому я покажу лишь минимальные приёмы.
В первую очередь следует заблокировать работу скрипта, если нет входящих POST-данных. В начале php добавьте такой код:
Теперь при прямом вызове этого скрипта, будет выдаваться сообщение и работа скрипта будет прекращена.
Во вторую очередь следует проверять все входящие данные из формы и по возможности их так обрабатывать, чтобы исключить возможные проблемы безопасности. Сама форма должна использовать HTML-атрибуты для полей, чтобы обеспечить первоначальную валидацию данных. Например, если поле предназначено для электропочты, то следует указать тип email — браузер не позволит выполнить отправку неверных данных.
В некоторых случаях желательно использовать различные jQuery-плагины, который позволяют отформатировать ввод данных. Например ввод телефона в виде групп цифр. Я затрагиваю эти вопросы, поскольку он достаточно важны, но в своих примерах я их опускаю, чтобы не загромождать код.
Отправка email-почты
Это достаточно типовая задача, которая решается через submit-отправку. Пусть будет простая форма из двух полей.
Обработчик у нас в post-email.php. На входе ($_POST) получаются такие данные:
Аналогично можно поступить и с другими полями формы. Поскольку они являются обязательными, то форма всегда должна их содержать.
Дальше вынесем входящие данные в отдельные переменные:
С помощью trim() удаляем возможные крайние пробелы, а strip_tags() удаляет все html/php-тэги.
Дальше следует проверить входящие данные. В первую очередь верность email-адреса. Вполне возможна ситуация, когда посетитель использовал старую версию браузера, которая не понимает нужный тип поля ввода. Если адрес ошибочный, то следует выдать предупреждение и выйти из php-обработчика.
Аналогично поступаем с именем, если оно оказалось пустым.
Вот теперь все проверки пройдены и можно выполнить непосредственную отправку почты. Я приведу полный код post-email.php:
Вы можете использовать данный пример как заготовку для своих задач.
Отправка формы без перезагрузки страницы на PHP и Ajax
Постоянно приходится пользоваться этой заготовкой. Вы можете модернизировать ее под любые нужды, будь то форма обратной связи, форма обратного звонка или заказ какой-либо услуги или товара.
Поэтому я не буду украшать ее стилями, применять классы Bootstrap и различные скрипты, как например маска телефона. Это вы сможете сделать при необходимости в зависимости от задачи.
Используя только одно включение кода из этого примера, можно создать неограниченное количество различных форм на странице. Это будет актуально, например для сайтов лендингов, где на одной странице используется множество различных форм.
HTML-код формы
Для начала создадим саму форму на HTML. Для примера будем использовать только 3 поля: имя, телефон и сообщение.
Один важный момент: у тега
В форме используем атрибут type в зависимости от типа поля. Это даст дополнительное преимущество при проверке вводимых данных. Чаще всего приходится использовать такие поля как:
Так же на данный момент для полей существуют различные атрибуты, которые избавят от лишних проверок на JavaScript. В этом примере используется атрибут required устанавливающий поле обязательным. А вот например в атрибуте pattern можно указать регулярное выражение для проверки маски ввода. Но я все же для этих целей использую соответствующий плагин jQuery.
Отправка формы без перезагрузки страницы
Тут самое интересное. Но как всегда на самом деле все просто. Приведенный ниже код можно подключить в отдельном .js скрипте или прямо в теле страницы перед закрывающим тегом
jQuery AJAX submit form
I have a form with name orderproductForm and an undefined number of inputs.
I suppose one way would be to do something like
However I do not know exactly all the form inputs. Is there a feature, function or something that would just send ALL the form inputs?
20 Answers 20
This is a simple reference:
You can use the ajaxForm/ajaxSubmit functions from Ajax Form Plugin or the jQuery serialize function.
AjaxForm:
ajaxForm will send when the submit button is pressed. ajaxSubmit sends immediately.
Serialize:
Another similar solution using attributes defined on the form element:
There are a few things you need to bear in mind.
1. There are several ways to submit a form
We should therefore bind to the form submit event, not the button click event. This will ensure our code works on all devices and assistive technologies now and in the future.
2. Hijax
The user may not have JavaScript enabled. A hijax pattern is good here, where we gently take control of the form using JavaScript, but leave it submittable if JavaScript fails.
We should pull the URL and method from the form, so if the HTML changes, we don’t need to update the JavaScript.
3. Unobtrusive JavaScript
Using event.preventDefault() instead of return false is good practice as it allows the event to bubble up. This lets other scripts tie into the event, for example analytics scripts which may be monitoring user interactions.
Speed
We should ideally use an external script, rather than inserting our script inline. We can link to this in the head section of the page using a script tag, or link to it at the bottom of the page for speed. The script should quietly enhance the user experience, not get in the way.
Code
Assuming you agree with all the above, and you want to catch the submit event, and handle it via AJAX (a hijax pattern), you could do something like this:
You can manually trigger a form submission whenever you like via JavaScript using something like:
Edit:
I recently had to do this and ended up writing a plugin.
Add a data-autosubmit attribute to your form tag and you can then do this: