Привет,
В этой статье вы узнаете, что такое Ajax и удаленная отправка форм в rails.

Что такое Аякс?

Давайте разберемся в этом, ответив на следующие вопросы:

Что происходит, когда мы посещаем веб-сайт?

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

Что делать, если мы не хотим перезагружать страницу или что, если мы хотим обновить только какой-то раздел нашей текущей страницы без перезагрузки страницы?

Итак, здесь на помощь приходит AJAX (асинхронный Javascript и XML). Ajax представляет собой смесь нескольких технологий и позволяет вносить изменения на стороне клиента без перезагрузки страницы.

Удаленная отправка формы в Rails

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

Имя контроллера: панель управления
Действие, которое отображает форму: new_user
Действие, которое отвечает на запрос Ajax: save_new_user

Шаг 1. Создание формы с удаленным значением true

Когда вы создаете форму, вам просто нужно добавить

remote: true

в теге формы и рельсах автоматически использует Ajax.

new_user.html.erb
<%= form_for @user, url: save_new_user_dashboard_index_path, html: { method: :post }, remote: true do |f| %>
.
.
.
<% end %>

Фактический HTML-код, сгенерированный ERb, выглядит следующим образом:

<form class=”new_user” id=”new_user” action=”/dashboard/save_new_user” accept-charset=”UTF-8" data-remote=”true” method=”post”>
.
.
.
</form>

Как видите, он устанавливает переменную data-remote="true" внутри тега формы, которая указывает Rails разрешить обработку формы с помощью JavaScript.

Шаг 2. Заставьте контроллер отвечать на запросы Ajax

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

dashboard_controller.rb
def save_new_user
  @user = User.create(new_user_params)
  respond_to do |format|
    format.html {redirect_to new_user_dashboard_index_path}
    format.js
  end
end

Приведенный выше синтаксис может сбивать с толку, но важно понимать, что выполняется только одна из строк. В этом смысле respond_to больше похож на оператор if-then-else, чем на серию последовательных строк. При наличии Ajax-запроса (т. е. если установлено значение remote: true), будет выполнен format.js, в противном случае будет выполнен format.html.

Шаг 3. Создание файла ruby ​​со встроенным Javascript

Когда будет выполняться format.js, rails автоматически вызывает встроенный в Javascript файл ruby(.js.erb) с тем же именем, что и имя действия.
Внутри файла JS-ERb Rails автоматически предоставляет помощники jQuery JavaScript, необходимые для управления страницей с помощью объектной модели документа (DOM). Файлы JS-ERb также позволяют использовать встроенный Ruby, который мы применяем в файле save_new_user.js.erb для рендеринга партиала с информацией о пользователе. Мы будем использовать метод escape_javascript.

save_new_user.js.erb
$("#show_user_information").html("<%= escape_javascript render(partial: 'dashboard/show_user_information', locales: { user: @user }) %>");

$("#show_user_information") выберет элемент с id show_user_information и html обновит этот элемент содержимым, присутствующим в его аргументе. Ниже приведен код партиала show_user_information:

_show_user_information.html.erb
<div>
   <span>First Name: <%= @user.first_name %></span>
</div>
<div>
   <span>Last Name: <%= @user.last_name %></span>
</div>
<div>
   <span>Email: <%= @user.email %></span>
</div>

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

Краткое содержание

Поздравляем! Вы узнали об Ajax, который позволяет делать асинхронные запросы и удаленно отправлять формы в rails.

Спасибо за прочтение!