Отправка формы через ajax: Отправка произвольной формы на AJAX без перезагрузки страницы

Gravity Forms AJAX Submit: все, что вам нужно знать

Знаете ли вы, что Gravity Forms поддерживает AJAX? Включение AJAX означает, что ваши формы больше не требуют перезагрузки страницы для проверки и отправки записей.

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

Мы собираемся ответить на все эти (и многие другие) вопросы в этом посте. Продолжайте читать, чтобы узнать все, что вам нужно знать о отправках Gravity Forms AJAX!

Полезные советы прямо в вашем почтовом ящике.

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

Полезные советы прямо в вашем почтовом ящике.

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

Что такое AJAX?

AJAX означает асинхронный JavaScript и XML; это метод программирования, который позволяет вам получать доступ к информации с веб-сервера после того, как страница уже загружена.

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

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

Как включить отправку AJAX в Gravity Forms

AJAX отключен по умолчанию в новых Gravity Forms. Однако вы можете включить AJAX для новых или существующих форм всего за несколько кликов. Вот как это сделать.

Включить отправку AJAX в существующих формах

Процесс включения AJAX в существующих формах зависит от того, какой редактор вы используете (либо классический редактор WordPress, либо более новый редактор Gutenberg «Блок»). Давайте посмотрим, как включить AJAX для существующих форм в обоих редакторах.

Включение AJAX форм Gravity Forms в редакторе блоков

Начните с редактирования страницы, в которую встроена ваша форма. Затем найдите блок «Gravity Forms» и нажмите на него, чтобы открыть настройки блока на правой панели. Теперь откройте панель настроек «Дополнительно» и включите «AJAX».

Включение AJAX для форм в классическом редакторе

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

Начните с редактирования страницы, на которую встроена ваша форма. Теперь найдите шорткод Gravity Forms. Шорткод будет выглядеть примерно так (плюс-минус несколько параметров):

 [gravityform id="34" title="true" description="true"] 

Чтобы включить AJAX, все, что вам нужно сделать, это добавить ajax=«true» перед закрывающей скобкой, например:

 [gravityform id=»34» title=«true» description=«true» ajax=«true»] 

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

Включить отправку AJAX для новых форм

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

Редактор блоков:

Начните с перехода к существующей странице/сообщению или просто создайте новую. Затем нажмите значок «+», чтобы добавить новый блок на свою страницу, и выберите блок «Gravity Forms». Если вы не можете найти его в средстве выбора блоков, введите «Gravity Forms» в строку поиска.

После добавления блока Gravity Forms в макет страницы выберите форму, которую хотите встроить, из раскрывающегося меню.

Затем откройте панель настроек «Дополнительно» справа и включите «AJAX».

Вот оно! Теперь сохраните сообщение или страницу, и все готово.

Классический редактор:

Начните с перехода к существующей странице/сообщению или просто создайте новую. Далее нажмите на кнопку «Добавить форму» над редактором.

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

Наконец, нажмите «Вставить форму» и сохраните сообщение или страницу.

Как видите, включить AJAX для новых или существующих форм можно быстро и просто!

Gravity Forms AJAX не работает? Вот что делать

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

Проверьте свой шорткод на наличие ошибок 

Если ваша форма встроена с помощью шорткода Gravity Forms, еще раз проверьте, нет ли ошибок, таких как отсутствующие двойные кавычки или слова с ошибками.

Попробуйте отключить Google reCAPTCHA

Раньше Google reCAPTCHA был несовместим с AJAX. Многие люди включали reCAPTCHA, а затем обнаруживали, что их форма не работает должным образом с включенным AJAX.

Эта проблема была исправлена ​​в 2019 году, когда Google выпустила обновление, которое сделало reCAPTCHA совместимой с AJAX. Тем не менее, возможно, стоит отключить его и снова отправить форму, чтобы посмотреть, что произойдет. Если это работает, когда reCAPTCHA отключен, попробуйте использовать поле приманки в качестве альтернативной меры защиты от спама.

Проверить наличие ошибок JavaScript

Если отправка Gravity Forms AJAX просто не работает, проверьте консоль на наличие ошибок JavaScript. Если вы видите такую ​​ошибку, как «gform не определена», велика вероятность того, что скрипты не ставятся в очередь правильно. Это может быть связано с тем, что ваша тема или плагины вызывают конфликты.

Если вы не можете устранить проблему самостоятельно, обратитесь за помощью к разработчику или обратитесь в службу поддержки Gravity Forms.

Вставьте форму с помощью редактора WordPress

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

Отключить плагины кэширования

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

Проверка на конфликты плагинов или тем

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

Gravity Forms AJAX для многостраничных форм

Gravity Forms позволяет создавать многостраничные формы (также называемые многошаговыми формами). После создания многоступенчатой ​​формы вы можете встроить ее на свой сайт и включить AJAX так же, как и с обычной формой: просто откройте настройки блока, щелкните вкладку «Дополнительно» и включите «AJAX».

Gravity Forms 2.6 представляет функцию сохранения форм AJAX

С выпуском Gravity Forms 2.6 появилась новая функция — сохранение форм AJAX. Теперь вы можете сохранять изменения в редакторе форм без необходимости обновления страницы! Это обеспечивает более быстрое и плавное обновление форм.

Вот короткий видеоклип, показывающий, как это работает:

Начните использовать AJAX со своими гравитационными формами уже сегодня!

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

Включение отправки AJAX — простой процесс, который может улучшить ваш веб-сайт с точки зрения UX, так почему бы не попробовать?

Чтобы узнать больше о Gravity Forms, прочитайте «Как использовать Gravity Forms: полное руководство» или подпишитесь на нашу рассылку ниже!

Полезные советы прямо в вашем почтовом ящике.

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

Полезные советы прямо в вашем почтовом ящике.

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

Отправка форм Ruby on Rails через Ajax

21 июля 2020 г.

Вы когда-нибудь хотели отправить форму и управлять элементами HTML-страницы без запуска полной перезагрузки страницы в Rails?

В этом учебном пособии демонстрируется простой способ отправки и обработки данных формы через форму с удаленным доступом к данным . К концу этого поста вы поймете, как: (1) отправлять формы Rails асинхронно, (2) проверять и обрабатывать асинхронные данные и (3) использовать сгенерированные сервером ответы JavaScript (SJR) для ответа на отправленные формы.

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

Репозиторий с исходным кодом этого руководства доступен здесь.

1. Обзор
2. Создайте новое приложение Rails
3. Создать каркас
4. Проверка модели
5. Настройка формы и отображение результатов
6. Отправить форму через Ajax
7. Обработка успешных записей
8. Подробный обзор эффективности и детального контроля Ajax
9. Ошибки проверки рендеринга
10. Проверка на наличие ошибок/внутренностей

Что мы создадим:

Простая форма с одним вводом текста, сохраняющая записи в базу данных.

В этой форме есть важная деталь — число 9.0047 атрибут data-remote :

Этот атрибут означает, что форма будет отправлять результаты через Ajax. В свою очередь, Rails отвечает на успешные записи формы, используя JavaScript, содержащийся в файле .js.erb . Конвейер ресурсов Rails анализирует этот файл .js.erb — сначала встроенную часть Ruby ( .erb ), затем часть JavaScript ( .js ).

На практике это означает, что вы можете включить код Ruby в код JavaScript. Мы будем использовать стандартный JavaScript в наших .js.erb , но вы также можете легко использовать jQuery или другие библиотеки JS, плагины и т. д.

Мы проверим входные данные на наличие ( имя не может быть пустым) и уникальность ( имя не может уже существовать в базе). Эти проверки будут происходить на стороне сервера — на уровне модели — как обычно в приложении Rails.

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

Если проверка формы не пройдена, Rails отклонит ввод и отобразит сообщение об ошибке.

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

В результате получается элегантная альтернатива полной перезагрузке страницы Rails.

Существуют и другие варианты создания аналогичных функций, включая Stimulus, перехват JavaScript, jQuery Ajax и другие более надежные решения для внешнего интерфейса (React, Vue, Ember и т. д.). Но во многих случаях это идеальный компромисс между простотой и функциональностью.

(1)

Запустите rails -v

В этом пошаговом руководстве предполагается, что вы используете Rails 6. Он должен работать на всех версиях 5.1.0 или выше (дата выпуска 27 апреля 2017 г.), когда Rails заменил jQuery собственным ненавязчивым адаптером javascript под названием рельсы-ужс. Если вы используете более раннюю версию Rails, посетите https://www.learnetto.com/blog/rails-ajax, чтобы узнать больше о переходе с jQuery на rails-ujs.

(2)

Создайте новое приложение Rails с помощью рельсы новые sjr_basics --database=postgresql

(3)

Закомментируйте gem 'jbuilder' в Gemfile

Отключение jbuilder не позволяет Rails генерировать код, связанный с API, в наших шаблонах. Мы отключаем эту функцию для простоты.

(4)

Комплект Run

(5)

Создайте каркас с именем car с одним атрибутом: name

(6)

Перенесите базу данных с помощью rails db:migrate

(7)

Запустите сервер с rails s , перейдите по адресу http://localhost:3000/cars и подтвердите, что видите что-то вроде этого.

(8)

Проверить наличие и уникальность атрибута name в app/models/car.rb

(9)

Откройте консоль Rails с rails c и убедитесь, что проверка модели работает.

Это показывает нам добавление двух автомобилей, car_1 и car_2 .

car_2 отклоняется, поскольку имя не уникально.

(10)

Добавьте @car в метод index в контроллере.

Нам нужно добавить этот объект, чтобы мы могли передать его помощнику form_with на следующем шаге.

(11)

Отобразите форму на app/views/cars/index.html.erb

(12)

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

(13)

Удалить local: true из формы. Также убедитесь, что вы используете form_with

Это небольшое, но важное изменение. Мы указываем Rails отправлять форму с помощью Ajax вместо обычного POST-запроса. Rails обнаружит это в контроллере, и мы будем использовать его для запуска ответа, специфичного для JavaScript.

(14)

Когда вы обновите страницу и проверите форму HTML, вы увидите, что теперь она имеет data-remote: true атрибут

(15)

Добавьте следующий код в app/controllers/cars_controller. rb для обработки результатов с использованием блоков response_to в методе создания.

Этот код указывает Rails отображать различные форматы ответа в зависимости от того, успешно ли сохранено @car . Если @car сохраняется, мы отображаем ответ JavaScript. Если это не удается, мы отображаем ответ HTML.

(16)

Экстракт вагон в партиал и используйте его для отображения списка из автомобилей

(17)

Создайте app/views/cars/create.js.erb и добавьте следующий код

Rails использует этот код для ответа на успешные записи. Поскольку мы указали format.js в нашем контроллере, Rails знает, что нужно искать в каталоге app/views/car

файл create.js.erb . Подробнее о response_to см. https://kolosek.com/rails-respond_to-block/.

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

(18)

Теперь вы можете создать новую машину, и она сразу же появится в списке

H. Подробнее об эффективности Ajax и детальном управлении логи сервера. Переход на формы Ajax незаметен, но важен. Вы должны понимать (А), что именно происходит на уровне сервера, и (Б) почему это важно.

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

rails s .

Здесь мы представили образец объекта с именем Динозавр , также с одним атрибутом имя ). Журнал показывает, что произошло, что я объясню ниже, чтобы вы могли следить за ним:

Это показывает, что сервер обрабатывает наш запрос POST как HTML. Параметры данных передаются в виде хэша. Проверка нашей модели запускает поиск, чтобы убедиться, что имя уникально. Затем он вставляет и фиксирует объект в базе данных. Наконец, он перенаправляется на путь индекса динозавров, вызывая полную перезагрузку страницы индекса (это запрос/ответ GET во второй записи журнала).

Сравните это с записью журнала сервера для нашей отправки Car Ajax:

Обратите внимание, что этот подход не требует отдельного запроса GET для получения всей страницы? Вместо этого Rails просто отображает create.js.erb . Это значительно сокращает время отклика сервера, что приводит к более быстрому взаимодействию с пользователем и снижению затрат на сервер.

На данный момент наша форма работает нормально для успешной отправки формы. Но что происходит, когда наша форма не проходит проверку?

(19)

Попробуйте добавить автомобиль с именем, которое уже есть в базе данных

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

Что случилось? Начните с просмотра журнала сервера:

Браузер отправил запрос POST через Ajax. CarsController#create попытался обработать запрос, который не прошел проверку модели и был отменен. В соответствии с нашими инструкциями в контроллере, Rails отрендерил index.html.erb .

Но index.html.erb не улавливает ошибки. Почему нет?

Ответ: Турболинки. Код Turbolinks работает путем замены элементов HTML. Он точно не знает, что делать с нашими асинхронными данными JS. Если вы хотите глубже погрузиться в Turbolinks, что я настоятельно рекомендую, https://thoughtbot.com/upcase/videos/turbolinks — хорошая отправная точка. Как и следовало ожидать, репозиторий Turbolinks (https://github.com/turbolinks/turbolinks) также очень хорошо документирован и доступен.

Чтобы решить эту проблему, мы будем использовать гем turbolinks_render , который помогает передавать информацию, необходимую Rails для ответа на запрос Ajax. Вы должны узнать больше об этом драгоценном камне от его автора, Хорхе Манрубиа. Для наших целей достаточно понимать, что turbolinks_render позволяет нам отображать ошибки проверки, когда удаленная форма данных не проходит проверку.

(20)

Добавьте turbolinks_render в Gemfile , запустите бандл и перезагрузите сервер

(21)

Теперь, когда вы пытаетесь отправить дубликат автомобиля, Rails выдает сообщение об ошибке

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

После определения имени уже существует в базе данных Rails отображает представление индекса. В частности, turbolinks_render преобразует данные JS в формат, который может отображать Turbolinks.

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

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

Мы можем легко исправить это с помощью дополнительного JavaScript. Но я не поэтому выделяю эту ошибку, и мы не будем ее исправлять здесь.

Урок: Добавление функций Ajax в приложения Rails может быть особенно заманчивым для новичка. Может показаться, что вы обеспечиваете более целенаправленный пользовательский опыт. Тем не менее, эта ошибка показывает уровень внимания, детализации и тестирования (также известного как стоимость), который сопровождает такие функции.

Некоторые разработчики называют эту кажущуюся сложность одной из слабостей Rails. В некоторых случаях такая оценка верна.

Во многих других случаях (по моей оценке, в подавляющем большинстве) подход Rails служит здесь полезной цели. Величественный монолит заставляет вас признать ползучесть сложности. Это проверка кишечника. Запах кода. Вам действительно нужен такой детальный контроль? Действительно ли это делает ваш продукт более простым для пользователей? Ответ часто «нет». Вы можете добавить его, если вам нужно, но по уважительной причине он не используется по умолчанию. Это отличный пример соглашения вместо конфигурации в действии.