WordPress. форма обратной связи без плагинов и без перезагрузки

HTML&PHP форма (и скрипт) обратной связи для блога, сайта

Вот какие формы вы получите:

Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма

Одно заказчику, другое — вам.

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

Вставка на сайт производится просто:
— можете дать ссылку на /sendmail/index.php
— можете сразу вставить на страницу, при помощи кода

Пример кода:

Код можно найти на сайте, ссылка на который размещена выше.

Форма довольно минималистичная — не всем понравится дизайн «прямиком из девяностых», кому-то не нужна каптча, кому-то не хватает Аякса и красивых сообщений об ошибке. Решение есть.

Синхронные запросы

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

  1. Посетитель нажимает в форме обратной связи кнопку «Отправить».
  2. Браузер видит, что по кнопке нужно отправить запрос на сервер. Он пакует запрос и отправляет. 
  3. Сервер получает запрос, обрабатывает и даёт ответ в виде новой веб-страницы. 
  4. Браузер загружает эту новую страницу с нуля. На ней уже все нужные пользователю данные, но есть ощущение «вспышки»: ты был на одной странице, потом экран побелел, и ты оказался на новой странице. 

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

Именно так работает наша форма обратной связи: вы нажимаете на кнопку и браузер, чтобы показать новые данные, начинает загружать новую страницу. Но есть и другой способ. 

Отправка данных формы

Есть три способа отправки данных формы:

  • Создание  вручную.
  • Использование самостоятельного  объекта.
  • Использование  связанного с  элементом.

Давайте рассмотрим их подробнее:

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

Посмотрите на пример:

И на JavaScript:

Это результат:

Note: This use of is subject to the same-origin policy (en-US) if you want to send data to a third party web site. For cross-origin requests, you’ll need CORS and HTTP access control.

Building an HTTP request by hand can be overwhelming. Fortunately, the XMLHttpRequest specification provides a newer, simpler way to handle form data requests with the (en-US) object.

The (en-US) object can be used to build form data for transmission, or to get the data within a form element to manage how it’s sent. Note that (en-US) objects are «write only», which means you can change them, but not retrieve their contents.

Using this object is detailed in Using FormData Objects, but here are two examples:

You should be familiar with that HTML sample. Now for the JavaScript:

Here’s the live result:

Using FormData bound to a form element

You can also bind a object to an element. This creates a object that represents the data contained in the form.

The HTML is typical:

But JavaScript takes over the form:

Here’s the live result:

You can even get more involved with the process by using the form’s property to get a list of all of the data elements in the form and manually manage them one at a time. To learn more about that, see the example in в HTMLFormElement.elements.

Создание HTML-формы

Наша первая задача — настроить HTML-форму. Задайте для элемента <form> идентификатор ajax-contact, для атрибута method установите значение post, а для атрибута action— значение mailer.php.

<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>
<textareaid="message" name="message" required></textarea>
</div>

<div class="field">
<button type="submit">Send</button>
</div>
</form>

Мы создали форму с полями для ввода имени пользователя, адреса электронной почты и сообщения

Обратите внимание, что каждое поле формы содержит атрибут required. В браузерах, поддерживающих валидацию форм HTML5, его использование не разрешает отправку данных, если поля не заполнены

Затем нужно создать

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

<div id="form-messages"></div>

Теперь нужно загрузить примеры кода и скопировать файл style.css в каталог проекта. Также необходимо добавить элемент <link>, который указывает браузеру загрузить файл CSS.

<link rel="stylesheet" href="style.css">

Нужно создать два элемента <script>, которые ссылаются на библиотеку jQuery и файл 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.

Преимущества готовой формы

  1. Установка за пару минутЗарегистрируйтесь, создайте форму, вставьте код скрипта на
    ваш сайт
  2. Настроенная отправка почты
    Письма отправляются нашим почтовым сервером, с нашей стороны сделаны все необходимые
    настройки чтобы письма посетителей вашего сайта не попадали в спам, а доставлялись на ваш
    емайл адрес, который вы укажете в настройках.
    Сообщения приходят с нашего адреса, но при ответе на письмо в адресе будет указан емайл
    пользователя.
  3. Обработка персональных данныхАвтоматическая генерация пользовательского
    соглашения и запроса на обработку персональных данных согласно законодательству РФ
  4. Отправка сообщений с сайта в TelegramПисьма с сайта скрипт будет отправлять в ваш telegram.
  5. Уведомления по smsВ настройках вы можете добавить ваш номер телефона и получать дополнительно смс с сайта.
  6. Простая настройка
    При создании используется простой конструктор формы обратной связи (генератор кода).
    Вы можете легко поменять цветовую гамму, расположение, вид (всплывающая форма обратной связи
    или встроенная)
  7. Доступность и универсальность
    Вы можете использовать наши скрипты абсолютно бесплатно (в пределах лимитов которых
    более чем достаточно для абсолютного большинства веб ресурсов). Нашу адаптивную форму отправки почты можно добавить на сайт html(с или без php), wordpress,joomla, modx,тильда и любые
    другие движки
  8. Поддержка пользователей
    Вы в любой момент можете обратиться к нашим техническим специалистам через нашу форму
    отправки сообщений и они помогут вам добавить виджеты
    на сайт и настроить их.

Необходимые файлы и папки

3.1 Файловая структура

  • app/
    • assets/
      • css/
      • js/
        • bootbox.min.js
        • jquery.min.js
    • products/
      • create-product.js
      • delete-product.js
      • read-products.js
      • read-one-product.js
      • update-product.js
    • app.js
  • index.html

3.3 Подключение Bootstrap

Как вы можете видеть из файла index.html, мы включили Bootstrap через CDN.

Если вам нужно включить Bootstrap через загрузку, то это будет работать также.

3.4 Создание главного CSS файла

  1. Создайте в корне папку app
  2. В ней создайте папку assets
  3. В папке assets создайте папку css
  4. В папке css создайте файл style.css

Файл style.css — это наш главный файл CSS. Вы можете поместить в этот файл любой CSS для дополнительной стилизации веб-страницы. В нашем случае у нас есть следующий код CSS внутри файла style.css.

3.5 Установка JavaScript-библиотек jQuery и Bootbox.js

Откройте папку assets в папке app и создайте папку js

В папку js мы поместим библиотеки jQuery и Bootbox.js.

Библиотека jQuery необходима, чтобы сделать наше простое приложение простым. Скачайте jQuery по этой ссылке.

Библиотека Bootbox.js необходима, чтобы диалоговое окно подтверждения «удаления» выглядело лучше. Загрузите Bootbox.js по этой ссылке.

Также есть CDN для этих JavaScript библиотек. Вы можете использовать их, если хотите. Оба варианта будут работать.

3.6 Создание файла app.js

Файл app.js будет содержать некоторые основные функции HTML и JavaScript, которые могут использоваться другими JS файлами в нашем приложении.

В папке app создайте файл app.js со следующим содержимым.

3.7 Создание папки «products» и файлов для будущих скриптов

Теперь мы создадим несколько JavaScript файлов.

  1. Внутри папки app создайте папку products
  2. В папке products создайте следующие файлы:
  • read-products.js
  • create-product.js
  • read-one-product.js
  • update-product.js
  • delete-product.js

Пока мы оставим их пустыми. Но мы заполним их в следующих разделах этого руководства.

Подключение необходимых библиотек и скриптов

Отправка сообщений происходит на AJAX без перезагрузки страницы, поэтому в первую очередь нам необходимо подключить библиотеку jQuery. Большинство современных тем и шаблонов уже используют библиотеку jQuery и подключать ее повторно не требуется. В противном случае она подключается в functions.php следующим образом:

Теперь нам необходимо подключить свой скрипт, который будет работать в паре с обработчиком mail.php и отправлять сообщения, а также выводить информационные сообщения без перезагрузки страницы. Для этого создаем файл contact.js со следующим содержимым:

В 6 строке Вам необходимо изменить путь к файлу-обработчику mail.php.

Подключать скрипт допустимо как на одной странице с формой, так и для всего сайта в заголовке или подвале, указав свой путь к файлу:

Основная работа завершена и наша форма на данном этапе уже полностью работоспособна, остался последний штрих — придать ей форму.

Отправляем PHP-скрипт на сервер

Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.

Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:

Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!

Идеальный порядок

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

Еще раз, для валидации формы мы будем использовать некоторые инструменты. К ним относятся:

  • Animate.css
  • Bootstrap Validator

Добавьте их также в проект, как мы делали ранее с Bootstrap и jQuery. Эти инструменты помогут обеспечить обратную связь с пользователем при отправке формы. Существует множество инструментов и фреймворков для проверки форм (включая встроенный HTML5 валидатор), но я использовал «Bootstrap Validator», так как он прекрасно интегрируется с нашей текущей формой.

Теперь структура проекта должна выглядеть примерно так:

Кратко об Ajax

Если вы новичок в Ajax, позвольте вкратце рассказать вам о том, что такое асинхронные запросы

Это важно знать, поскольку асинхронные запросы занимают в Ajax центральное место, а буква А в Ajax происходит от слова asynchronous

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

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

В случае Ajax вы приказываете браузеру связаться с веб-сервером и сообщить вам, когда запрос будет выполнен. Управление этой связью осуществляется с помощью функций обратного вызова (callback functions). Вы предоставляете браузеру одну или несколько функций, которые должны быть вызваны сразу же по завершении выполнения задачи. Должна быть предусмотрена функция, которая обработает успешный запрос, а кроме того, могут существовать функции, выполняющиеся в случае других исходов, например при возникновении ошибок.

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

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

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

Взаимодействие ajax с php

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

Для отправки данных на сервер, нужно создать объект XMLHTTPRequest.
С помощью него открыть url
(php скрипт),
послать на него данные (POST или GET
метод), получить ответ, и средствами знаний языка js вывести
полученный ответ сервера на монитор (ответом может быть любой фрагмент или
элемент страницы сайта).

Для прояснения посмотрите ниже предоставленную схему
иллюстрирующую взаимодействие ajax с php.

Использование вспомогательных методов для работы с конкретными типами данных

Библиотека jQuery предоставляет три вспомогательных метода, которые делают работу с некоторыми типами данных более удобной. Некоторые из них мы рассмотрим далее.

Получение HTML-фрагментов

Метод load() предназначен для получения только HTML-данных, что позволяет совместить запрос HTML-фрагмента, обработку ответа от сервера для создания набора элементов и вставку этих элементов в документ в одном действии. Пример использования метода load() представлен ниже:

В этом сценарии мы вызываем метод load() для элемента, в который хотим вставить новые элементы, и передаем ему URL-адрес в качестве аргумента. Если запрос завершается успешно, а полученный от сервера ответ содержит действительный HTML-фрагмент, элементы вставляются в указанное место в документе, как показано на рисунке:

Вы видите, что все элементы из файла flowers.html добавлены в документ, как мы и хотели, но поскольку у них отсутствует атрибут class, то они не укладываются в табличную компоновку страницы, используемую в основном документе. Поэтому метод load() наиболее полезен в тех случаях, когда все элементы могут быть вставлены в одно место в документе без какой-либо дополнительной обработки.

Получение и выполнение сценариев

Метод getScript() загружает файл JavaScript, а затем выполняет содержащиеся в нем инструкции. Чтобы продемонстрировать работу этого метода, я создал файл myscript.js и сохранил его вместе с файлом test.html на своем веб-сервере. Содержимое этого файла представлено в примере ниже:

Эти инструкции генерируют три ряда элементов, описывающих цветы. Мы обошлись здесь без определения шаблонов и использовали циклы для генерации элементов (хотя, вообще говоря, следовало бы воспользоваться шаблонами данных).

Самое важное, что необходимо знать при работе со сценариям, — между инициализацией Ajax-запроса и выполнением инструкций сценария состояние документа может измениться. В примере ниже приведен сценарий из основного документа, в котором по-прежнему используется метод getScript(), но при этом, еще до завершения Ajax-запроса, модифицируется дерево DOM:

Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать. Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен.

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

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

В данном примере после запуска Ajax-запроса с помощью метода getScript() из документа удаляется элемент row2, для чего используется метод remove(). Данный элемент используется в файле myscript.js для вставки новых элементов. Эти элементы отбрасываются незаметным для пользователя образом, поскольку в документе селектору #row2 ничто не соответствует. Итоговый результат представлен на рисунке:

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

Получение данных в формате JSON

Для загрузки данных JSON с сервера предназначен метод getJSON(). Возможно, это наименее полезный из всех трех вспомогательных методов, поскольку он не делает с данными ничего сверх того, что делает базовый метод get().

Добавляем анимацию

Наша клиентская валидация выглядит очень хорошо; у нас есть изящная подсветка пустых полей красным цветом. Однако было бы неплохо добавить в форму дополнительную анимацию и добавить дополнительные сообщения, позволяющие пользователю знать, что происходит. В настоящее время у нас есть сообщение «Message Submitted!», которое появляется при успешной отправке, но как насчет сообщения об ошибке?

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

Прежде всего, давайте удалим текст “Message Submitted!” из HTML-кода и просто оставим пустой блок div:

Теперь нам необходимо создать новую функцию для обработки статуса сообщения. Добавьте эту функцию в конец сценария

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

Во-первых, функция проверяет, имеет ли она успех или сообщение об ошибке, проверяя значение valid. В любом случае в переменную записываются необходимые имена CSS классов (нужно еще раз подключить и , так как позже мы удалим их по умолчанию).

Примечание: мы используем некоторые классы animate.css. Класс применит анимацию при успешной отправке сообщения.

Наконец, функция удаляет все классы из  (избегайте конфликтующих классов), затем добавляет классы, установленные ранее, а затем добавляет текст сообщения внутри элемента .

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

При отправке формы с пустыми полями должно появиться сообщение об ошибке “Did you fill in the form properly?»

Последним шагом для этой новой submitMSG функции — это вызвать ее при успешной отправке сообщения. Обновите функцию следующим образом:

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

Встряска

Еще одна анимация, верно? Давайте добавим еще одну анимацию для всей формы при сообщении об ошибке, анимационное «дрожание» должно выглядеть очень хорошо!

Создайте новую функцию сразу после и назовите ее

Эта функция использует подход, найденный на демо странице animate.css, который позволяет добавить анимацию к элементу, а затем повторно вызывать/добавлять ее снова и снова. С CSS анимациями связана одна небольшая проблема, если один раз добавить анимацию к
элементу и потом удалить стили, а затем добавить их по новой, то
анимация не повториться. Эта функция помогает сбросить классы по завершению анимации, а затем позволяет повторно добавить их. Когда пользователь нажимает кнопку «Отправить» в не до конца заполненной форме, мы хотим, чтобы анимация . И в случае если форма все еще заполнена неправильно, нужно чтобы анимация также срабатывала снова.

Мы можем вызвать эту функцию над функцией . К примеру:

Теперь, когда мы отправляем пустую форму, она будет дрожать, чтобы пользователь знал, что что-то пошло не так.

Форма в модальном окне

Нашу форму можно показать и в модальном окне. Модалку будет выводить библиотека Magnific Popup.

HTML код

Код кнопки

Код формы

Инициализируем модальное окно и форму. Давайте сделаем автоматическое закрытие окошка через 3 сек. после успешной отправки формы. Код вызова Magnific Popup вы также найдете в файле scripts.js.

Как включить Recaptcha?

Если вы хотите включить рекаптчу в форме, то вам необходимо добавить пустой блок с классом recaptcha в html-коде формы в том месте, где вы хотите ее вывести. Далее в коде вызова плагина формы передаем опцию captcha со значением true, а опцииcaptchaPublicKey передаем ваш публичный ключ recaptcha. Публичный и приватный ключи можете получить здесь.

Далее открываем файл обработчика формы submit.php из директории form-submit. Ищем переменную recaptchaOn (примерно 7-я строка) и выставляем ей значение true. Далее ищем переменную $secret (примерно 89-я строка) и меняем приватный ключ на свой.

В принципе все. После этих манипуляций каптча у вас должна появиться.

Теперь давайте заглянем в файл обработчика (submit.php) формы и пройдемся по основным кускам кода. Обработчик работает на языке php, поэтому если хотите протестировать форму вам необходимо будет использовать локальный сервер.

Шаг 4: создание Blade шаблона для формы запроса

На последнем этапе мы создаем шаблон Blade contact_form, он должен находиться в resources/views/contact_form.blade.php. Добавьте в него приведенный ниже код:

<html lang="en">
<head>
    <title>Laravel Ajax jquery Validation Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>

<div class="container panel panel-default ">
        <h2 class="panel-heading">Laravel Ajax jquery Validation</h2>
    <form id="contactForm">
        <div class="form-group">
            <input type="text" name="name" class="form-control" placeholder="Enter Name" id="name">
        </div>

        <div class="form-group">
            <input type="text" name="email" class="form-control" placeholder="Enter Email" id="email">
        </div>

        <div class="form-group">
            <input type="text" name="mobile_number" class="form-control" placeholder="Enter Mobile Number" id="mobile_number">
        </div>

        <div class="form-group">
            <input type="text" name="subject" class="form-control" placeholder="Enter subject" id="subject">
        </div>

        <div class="form-group"> 
          <textarea class="form-control" name="message" placeholder="Message" id="message"></textarea>
        </div>
        <div class="form-group">
            <button class="btn btn-success" id="submit">Submit</button>
        </div>
    </form>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

   <script>

    $('#contactForm').on('submit',function(event){
        event.preventDefault();

        let name = $('#name').val();
        let email = $('#email').val();
        let mobile_number = $('#mobile_number').val();
        let subject = $('#subject').val();
        let message = $('#message').val();

        $.ajax({
          url: "/contact-form",
          type:"POST",
          data:{
            "_token": "{{ csrf_token() }}",
            name:name,
            email:email,
            mobile_number:mobile_number,
            subject:subject,
            message:message,
          },
          success:function(response){
            console.log(response);
          },
         });
        });
      </script>
 </body>
</html>

Все готово к запуску в браузере – обработка данных из формы этим методом не требует обновления и перезагрузки страницы. Обращайтесь в комментарии в случае затруднений.

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, подписки, отклики, дизлайки, лайки!

Пожалуйста, опубликуйте свои комментарии по текущей теме статьи. За комментарии, лайки, отклики, подписки, дизлайки низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «Laravel Form Submit Using Ajax Easy Example»

Документация сниппета AjaxForm

AjaxForm

14 августа 2019, 07:00

Cниппет для отправки любых форм через ajax. По умолчанию рассчитан на работу с FormIt, но можно использовать и собственный сниппет.

  • Регистрирует нужные скрипты на фронтенде: jQuery.Form и jQuery.jGrowl.
  • Сохраняет в сессию при вызове сниппета.
  • Выводит указанную форму, прописывая класс ajax_form и скрытый input для получения .
  • Вешает обработчик на форму, чтобы она отправлялась через ajax.
  • При отправке запускает указанный сниппет для обработки и возвращает ответ от него.
  • Выводит сообщение об успехе, или ошибки, если есть.

Параметры сниппета

Имя По умолчанию Плейсхолдеры
&form tpl.AjaxForm.example Образец чанка с формой, которую нужно обработать.
&snippet FormIt Сниппет для обработки формы.
&frontend_css ]css/default.css Стили оформления формы и полей с ошибками
&frontend_js ]js/default.js Javascript для отправки формы через ajax
&actionUrl ]action.php Адрес коннектора, на который отправляется форма

Всё, что вы указываете AjaxForm, будет передано в вызываемый сниппет.

Обработка своим сниппетом

Вы можете использовать собственный сниппет, вместо FormIt, который будет делать что угодно (хоть создавать страницы на сайте).
Единственное требование — он обязательно должен возвращать JSON массив с ключами:

  • status — 1 или 0, то есть успех или ошибка.
  • message — сообщение о работе сниппета, выводится если status = 0.
  • data — массив для полей с ошибками, в котором ключами является имя поля, а значением — сообщение об ошибке.

Для удобства работы в параметры сниппета передаётся переменная с классом компонента, чтобы вы могли вызывать из него методы error и success при выдаче ответа.

Простейший пример своего сниппета:

Вызываем так:

Этот сниппет ничего не делает, просто возвращает результат проверки имени.

Валидация формы

Сервер может вернуть ошибку отправки формы и массив полей, не прошедших проверку.
Этим полям автоматически будет добавлен CSS класс , который убирается при последующей отправке.

Так же вы можете запретить отправку формы, используя javascript переменную afValidated — если она объявлена и равна , то форма не будет отправлена.

Обратите внимание, что все проверки на javascript можно обойти, так что эту переменную стоит использовать только для удобства пользователей, а не для реальной проверки данных

Событие af_complete

При получении ответа от сервера вызывается событие af_complete, которое вы можете использовать для обновления содержимого страницы или другой операции javascript.

Вам просто нужно указать функцию, в которую будет передано событие javascript и объект с ответом от сервера

Обратите внимание, что внутри этого объекта есть и отправляющая форма

redirect на другую страницу сайта, после успешной отправки формы?

Добавляем id к форме, если его нет и затем в js файл прописать вот такие строки

Можно просто обернуть в выше приведенный код и подключить в шаблон с формой ближе к закрытию body.

Всплывающие сообщения

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

Вторым параметром можно указать «прилипающий» popup — его нужно будет закрыть вручную, бывает полезно для показа серьёзных ошибок.

То есть, просто вызвав сниппет на странице, вы получаете подключенный jQuery.jGrowl и можете показывать приятные всплывающие уведомления на javascript.

Отладка

При возникновении любых проблем, в первую очередь проверяйте, отправляется ли форма без AjaxForm.
Помните, что AjaxForm — сниппет-обёртка, он не отправляет письма и не проводит проверку формы. Это делает ваш сниппет или FormIt.

Так же не забывайте заглядывать в консоль браузера на предмет ошибок javascript.
Если сервер выдаёт ошибку 500 при отправке, проверьте параметр register_globals у вашего PHP — он должен быть отключен.

Что такое AJAX ? Пример реализации.

AJAX, или, более длинно, Asynchronous Javascript And Xml — технология для взаимодействия с сервером без перезагрузки страниц.

За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

Например, при нажатии кнопки голосовать — из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.

Здесь будет ответ сервера

Технология AJAX, как указывает первая буква A в ее названии — асинхронна, т.е браузер, отослав запрос, может делать что угодно, например, показать сообщение
об ожидании ответа, прокручивать страницу, и т.п.

Вот код кнопки в примере выше:

<input value="Голосовать!" onclick="vote()" type="button" />

При нажатии она вызывает функцию , которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в ‘е под кнопкой:

<div id="vote_status">Здесь будет ответ сервера</div>

Далее мы разберем, как она работает, более подробно.

Для обмена данными с сервером используется специальный объект , который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:

function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

Более подробно о деталях реализации AJAX с использованием XmlHttpRequest и других транспортов можно почитать в разделе про общение с сервером.

Здесь мы не будем на этом останавливаться и перейдем сразу к функции :

// javascript-код голосования из примера
function vote() {
	// (1) создать объект для запроса к серверу
	var req = getXmlHttp()  
       
        // (2)
	// span рядом с кнопкой
	// в нем будем отображать ход выполнения
	var statusElem = document.getElementById('vote_status') 
	
	req.onreadystatechange = function() {  
        // onreadystatechange активируется при получении ответа сервера

		if (req.readyState == 4) { 
            // если запрос закончил выполняться

			statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)

			if(req.status == 200) { 
                 // если статус 200 (ОК) - выдать ответ пользователю
				alert("Ответ сервера: "+req.responseText);
			}
			// тут можно добавить else с обработкой ошибок запроса
		}

	}

       // (3) задать адрес подключения
	req.open('GET', '/ajax_intro/vote.php', true);  

	// объект запроса подготовлен: указан адрес и создана функция onreadystatechange
	// для обработки ответа сервера
	 
        // (4)
	req.send(null);  // отослать запрос
  
        // (5)
	statusElem.innerHTML = 'Ожидаю ответа сервера...' 
}

Поток выполнения, использованный vote, довольно типичен и выглядит так:

  1. Функция создает объект
  2. назначает обработчик ответа сервера
  3. открывает соединение
  4. отправляет запрос вызовом (ответ сервера принимается срабатывающей в асинхронном режиме функцией )
  5. показывает посетителю индикатор состояния процесса

Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый , ничем не отличается от обычного запроса.

Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией .

Пример: vote.php для примера с голосованием

<?php
sleep(3);
echo 'Ваш голос принят!';

Технология AJAX использует комбинацию:

  • (X)HTML, CSS для подачи и стилизации информации
  • DOM-модель, операции над которой производятся javascript на стороне клиента, чтобы обеспечить динамическое отображение и взаимодействие с информацией
  • XMLHttpRequest для асинхронного обмена данными с веб-сервером. В некоторых AJAX-фреймворках и в некоторых ситуациях, вместо XMLHttpRequest используется IFrame, SCRIPT-тег или другой аналогичный .
  • JSON часто используется для обмена данными, однако любой формат подойдет, включая форматированный HTML, текст, XML и даже какой-нибудь EBML

Типичное AJAX-приложение состоит как минимум из двух частей.

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая — находится на сервере и написана, например, на Ruby, Java или PHP .

Между этими двумя частями происходит обмен данными через XMLHttpRequest(или другой транспорт).

Оформление внешнего вида с помощью CSS

В этом примере я приведу фрагмент своего CSS файла, который отвечает за внешний вид формы обратной связи:

Вам потребуется два изображения, которые доступны в архиве с исходниками или сохраните их с этой страницы через контекстное меню по изображению «Сохранить картинку как…» и не забудьте в CSS изменить путь к этим файлам, если загружаете в иную папку.

— появляется в поле input при валидации формы; — появляется в поле input когда форма не заполнена или заполнена неверно.

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

Что в итоге

  • Мы можем установить количество обрабатываемых строк за одну итерацию (в самом скрипте);
  • Пользователю показывается настоящий прогресс-бар, а не бесконечная «крутилка» — если прогресс-бар стоит на середине, значит обработана половина файла;
  • Пользователь может остановить выполнение скрипта. В этом случае offset записывается в cookies на 10 мин, чтобы он мог продолжить работу скрипта с того же места.
  • Если пользователь обновит страницу, ему будет предложено продолжить работу скрипта с места остановки или начать заново (так же благодаря cookies).

UPD.здесьhabrahabr.ru/post/153731/

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: