Я был активным пользователем StackOverflow и заметил, что многие разработчики сталкиваются с трудностями при реализации Rails AJAX. Поэтому я подумал о создании демонстрационного приложения и объяснении, как оно работает.

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

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

Начнем с создания приложения:

rails new voting_app -d mysql

Нам нужно добавить пароль нашей базы данных в database.yml файл и следующие драгоценные камни в Gemfile.

Запустите bundle install, а затем выполните следующие команды, чтобы настроить удобный идентификатор, модель пользователя, модель публикации и контроллер.

После того, как мы выполнили миграцию, мы можем запустить наш сервер приложений, используя rails s.

Установите отношения один-ко-многим между пользователем и моделью публикации:

Обновите метод create в post_controller.rb, так как мы хотели бы связать сообщение с пользователем:

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

Откройте localhost: 3000 в своем любимом браузере и создайте свое первое сообщение.

Теперь нам нужно создать новый метод, который будет обрабатывать вызовы AJAX:

Обновите файл routes.rb только что созданным новым методом.

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

Нам нужно создать еще один файл: vote.js.erb (помните о соглашении по настройке, мы всегда должны пытаться называть представления такими же, как имя метода контроллера).

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

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

Добавьте следующий код в vote.js.erb, который соответствующим образом обновит представление. Здесь мы добавляем класс понравился к кнопке голосования, который меняет свой цвет на синий, если пользователю понравился блог, и удаляем класс понравился, если он не понравился пользователю.

И, наконец, обновите количество лайков на странице. Теперь код должен выглядеть так в файле vote.js.erb.

На скриншотах ниже вы можете увидеть, как кнопка голосов будет обновляться после того, как нравится или не нравится:

Прежде чем поставить отметку "Нравится":

Если отметка "Мне не нравится":

Несколько важных моментов:

Всякий раз, когда вы видите, что при выполнении действия на вашей странице ничего не происходит, даже если вы добавили код js в файл js.erb, это происходит из-за ошибки, которая возникает в файле js и, следовательно, код js не выполняется.

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

Не стесняйтесь задавать любые сомнения по поводу реализации AJAX в вашем приложении Rails.