Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Отправляем форму без обновления страницы с помощью jQuery

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Ранее на Nettuts + Фило показал, как вы можете использовать jQuery для добавления проверки формы на комментарии Wordpress, которая работает без перезагрузки страницы. Еще один отличный способ использовать jQuery для повышения удобства пользователей - это не просто проверка, но и отправка формы полностью без обновления страницы.

В этом уроке я покажу вам, как легко это сделать - отправьте форму обратной связи, которая отправляет электронное письмо, без обновления страницы с помощью jQuery! (Фактическое письмо отправляется с помощью php-скрипта, который обрабатывается в фоновом режиме). Давайте начнем.


Что мы строим

В этом примере у нас есть простая контактная форма с именем, адресом электронной почты и номером телефона. Форма отправляет все поля в php-скрипт без обновления страницы, используя собственные функции jQuery (это означает, вам не нужно загружать дополнительные плагины, чтобы заставить все это работать.

Если вы обнаружили эту статью без какого-либо предварительного знакомства с jQuery, отличным местом для начала станет статья Джеффри Пута о 15 ресурсах, чтобы начать работу с jQuery From Scratch.


Шаг 1 - Создайте HTML-форму

Давайте посмотрим на нашу разметку html. Начнем с нашей базовой html-формы:

Вы могли заметить, что я включил div с id contact_form, который оборачивает всю форму.
Не забудьте добавить этот div к вашей собственной форме, поскольку нам позже понадобится этот оберточный div. Вы
возможно также заметили, что я оставил как действие, так и метод тега формы пустыми. Нам
на самом деле здесь не нужен ни один из них, потому что jQuery позаботится об этом позже.

Еще одна важная вещь, которую нужно включить, - это значения id для каждого поля ввода. Значения id
это то, что ваш скрипт jQuery будет искать для обработки формы.

Я добавил некоторые стили CSS и фоновое изображение из Photoshop, чтобы создать следующую форму:


Шаг 2 - Начинаем добавлять jQuery

Следующим шагом в этом процессе является добавление некоторого кода jQuery. Я собираюсь предположить, что вы загрузили jQuery, загрузили его на свой сервер и ссылаетесь на него на своей веб-странице.

Затем откройте еще один новый файл javascript, укажите его в своем html, как и любой обычный файл javascript,
и добавьте следующее:

Первая function() занимается тем, что загружает события внутри, как только html документ будет готов. Если вы ранее уже работали jQuery, эта функция такая же, как функция document.ready jQuery. Итак, мы начинаем с этого, и внутри у нас есть функция click, которая выполняется при нажатии кнопки отправки с именем класса «button». В конечном итоге то, что мы достигли с этими строками кода, такое же, как если бы мы добавляли событие onclick к кнопке submit в html. Причина, по которой мы делаем это с jQuery, - это чистое разделение нашего отображения от наших скриптов.


Шаг 3 - Добавим некоторую валидацию формы

Внутри нашей функции, которая загружается, когда страница готова, мы добавляем некоторую проверку формы. Но первое, что вы увидите, это добавление: $('.error').hide();. Эта строчка скрывает наши 3 метки с именем класса «error». Мы хотим, чтобы эти ярлыки были скрыты не только тогда, когда
загружается страница, но также когда вы нажимаете «Отправить», в случае, если одно из сообщений было ранее показано пользователю. Каждое сообщение об ошибке должно появляться только в том случае, если проверка не выполняется.

Мы проверяем, сначала осталось ли поле имени пустым, и если да, тогда мы покажем метку с идентификатором name_error. Затем мы сосредоточим внимание на поле ввода имени, если пользователь
совсем не понимает, что делать дальше! (Я научился никогда не принимать слишком много от пользователей).

Чтобы более подробно объяснить, как это происходит, мы устанавливаем переменную «имя» в значение поля ввода с идентификатором «name» - все одной строкой jQuery:

Затем мы проверяем, пустое ли это значение, и если это так, мы используем метод jQuery show (), чтобы показать метку с
id "name_error":

Затем мы помещаем фокус формы обратно в поле ввода с идентификатором «name» и, наконец, возвращаем false:

Обязательно верните false в своем коде, иначе вся форма будет отправлена (что не является 
целью этого урока)! Если возвращается false, это не позволяет пользователю продолжать
без заполнения необходимого поля(ей).


Шаг 4 - Обработка нашего представления формы с помощью функции jQuery AJAX

Теперь мы добираемся до сути учебника - отправляем нашу форму без обновления страницы, которая отправляет значения формы в php сценарий в фоновом режиме. Давайте сначала взглянем на весь код, а затем я расскажу подробнее. Добавьте следующий код чуть ниже фрагмента проверки, который мы добавили ранее (и до того, как функция click кнопки будет закрыта):

У нас здесь много всего! Давайте разберем все это по небольшим частям -все это так просто и так легко использовать, как только вы понимаете этот процесс. Сначала мы создаем строку значений, которые являются всеми значениями формы, которые мы хотим передать сценарию, который отправляет электронное письмо.

Вспомним ранее, мы установили переменную 'name' со значением поля ввода с id "name", например:

Мы можем снова использовать это значение «name», а также значения «email» и «phone» для создания нашей dataString:

Я прокомментировал предупреждение, которое иногда использую, чтобы быть уверенным, что я использую правильные значения, которые могут оказаться полезными в этом процессе. Если вы раскомментируете это предупреждение и протестируете свою форму, предполагая, что все дошло до сих пор, вы должны получить сообщение, подобное следующему:

Теперь мы добираемся до нашей главной функции ajax, звезды сегодняшнего шоу. Вот где все происходит, так что обратите сюда
свое пристальное внимание!

В основном, что происходит в коде, это: Функция .ajax() обрабатывает значения из нашей строки с именем dataString (data: dataString) с помощью php-скрипта под названием process.php (url: "bin/process.php"), используя Метод POST (type: «POST»). Если наш скрипт успешно обработан, мы можем отобразить сообщение пользователю и, наконец, вернуть false, чтобы страница не перезагружалась. Вот оно! Весь процесс обрабатывается прямо в этих нескольких строках!

Есть более сложные вещи, которые вы можете сделать здесь, кроме отправки электронной почты и сообщения об успешном завершении. Например, вы можете отправить свои значения в базу данных, обработать их, а затем отобразить результаты обратно пользователю. Поэтому, если вы разместили опрос среди пользователей, вы можете обработать их голос, а затем вернуть результаты голосования, без необходимости обновления страницы.

Подведем итог тому, что произошло в нашем примере, чтобы убедиться, что мы все поняли. Мы взяли наши значения формы с помощью jQuery, а затем поместили их в строку следующим образом:

Затем мы использовали jQuery функцию ajax для обработки значений в dataString. После этого
процесс завершается успешно, мы выводим сообщение обратно пользователю и добавляем return false, чтобы наша страница не обновлялась:

Успешная часть скрипта была заполнена некоторым конкретным контентом, который может быть отображен обратно пользователю. Но что касается нашей функциональности ajax, это все, что нужно. Для получения дополнительных параметров и настроек обязательно ознакомьтесь с документацией jQuery по функции ajax. Примером здесь является одна из более простых реализаций, но даже в этом случае она очень эффективна, как вы можете видеть.


Шаг 5 - Отображение сообщения назад пользователю

Давайте вкратце рассмотрим ту часть кода, которая отображает наше сообщение обратно пользователю, чтобы закончить этот учебник.

Во-первых, мы меняем все содержимое div_control_form (помните, я сказал, что нам понадобится этот div) со следующей строкой:

В этой строке заменяется все содержимое внутри div_control_form, используя функцию jQuery html(). Поэтому вместо формы у нас теперь есть только новый div внутри, с id «message». Затем мы заполняем этот div фактическим сообщением - h2, в котором говорится: «Форма отправки отправлена»:

Затем добавим еще больше контента в div сообщения с помощью jQuery функции append(), и, прежде всего, мы добавим классный эффект, скрыв div с помощью jQuery функции hide(), а затем спрячем все это с помощью функции fadeIn():

Таким образом, пользователь получает следующие данные после отправки формы:

К настоящему моменту, я думаю, вам придется согласиться с тем, что невероятно легко отправлять формы без обновления страницы, используя мощную jQuery функцию ajax. Просто получите значения в вашем файле javascript, обработайте их с помощью функции ajax и верните false, и двигайтесь дальше. Вы можете обрабатывать значения в вашем php-скрипте так же, как и в любом другом php-файле, с той лишь разницей, что пользователю не нужно ждать обновления страницы - все это происходит тихо в фоновом режиме.

Поэтому, если у вас есть контактная форма на вашем веб-сайте, форма входа в систему или даже более продвинутые формы, которые обрабатывают значения через базу данных и возвращают результаты, вы можете сделать все это легко и эффективно, и, возможно, самое главное, вы повышаете качество работы с вашим сайтом, предоставляя интерактивность без необходимости ждать перезагрузки страницы.

Вывод

Я хотел бы добавить некоторые заключительные слова о нашем демонстрационном примере. В демонстрации вы можете заметить, что на самом деле используется один плагин - файл runonload.js. В начале учебника я указывал, что мы не будем использовать какие-либо плагины, а затем вы обнаружите в демо-версии дополнительный скрипт runonload, поэтому может понадобиться небольшое объяснение! Для всех, кто заинтересован в том, чтобы увидеть живую рабочую демоверсию, вы можете просмотреть мою консультационную SEO форму.

Единственное, что я сделал с runonload, на самом деле не имеет никакого отношения к обработке формы. Таким образом, вы можете полностью выполнить функцию ajax без каких-либо дополнительных плагинов. Я использовал runonload, чтобы сфокусировать поле ввода имени при загрузке страницы. Мой опыт заключался в том, что вызов runonload иногда может быть лучшей заменой для собственной функции готовности документа jQuery, и я обнаружил, что это действительно так. По какой-то причине функция focus() не будет работать при загрузке страницы с использованием функции готового документа jQuery, но она работает с runonload, и именно поэтому вы считаете ее частью этого примера. Поэтому, если вы знаете способ сделать это без использования runonload, я был бы рад услышать от вас об этом.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.