【Rails】Ajaxを使った非同期処理の流れを解説

RailsでAjaxを使ってサーバサイドと非同期通信する方法を紹介します。例として企業編集をAjaxを使って非同期で編集します。

1. 編集画面(View)

Viewで企業編集画面を用意します。formで編集したい項目を囲い、submitボタンが押下されたらサーバに送られ、フロントで受け取ります。

今回はAjaxを使った非同期通信の流れを紹介するため、それ以外の処理やモデル、routes.rbやja.ymlなどの定義は適宜読み替えてください。

2. サーバサイドで編集確認処理(Controller)

Viewから送られてきたパラメータを受け取り、バリデーションします(バリデーションはモデルに書いてある前提)。

バリデーションに引っかかった場合は、エラーを返します。

成功した場合は、セッションにパラメータを格納します。非同期処理なため、JSON形式で返すformat.jsonを使用します。

3. サーバからの編集確認結果を受け取る(View・CoffeeScript)

サーバから帰ってきたデータはフロントで受け取ります。

バリデーションに成功した場合は、data-remodal-idがedit-modal-confirmの編集確認モーダルが呼び出されます。

バリデーションに失敗した場合は、Viewの<div data-method=”edit_error_message”></div>にエラーメッセージを表示させます。

 

バリデーションに成功した場合、以下の編集確認モーダルが表示されます。

モーダルに表示された編集ボタンが押下されたら、編集処理を行うアクションにデータを送ります。

4. サーバサイドで編集処理(Controller)

バリエーションに成功したパラメータを先ほど格納したセッションから取り出し、編集処理を行います(実際の編集処理は割愛します)。

先ほどのCompaniesControllerに以下の処理を追記するような形です。

5. サーバからの編集結果を受け取る(View・CoffeeScript)

編集処理の結果をフロントで受け取ります。

編集処理に成功した場合は、data-remodal-idがedit-modal-completionの編集完了モーダルが呼び出されます。

 

編集処理に失敗した場合は、エラーモダールを表示させます。エラーモーダルは他でも使用するためApplication.js.coffeeに共通化しています。

 

編集に完了した場合、以下の編集完了モーダルが表示されます。

閉じるボタンを押下すると、画面がリロードされ編集された新しい情報が更新されます。

 

編集に失敗した場合、以下のシステムエラーモーダルが表示されます。

エラーメッセージが存在しない場合は、デフォルトのメッセージを表示するようにしています。

以上、RailsでAjaxを使った非同期処理の流れを紹介しました。