月: 2019年9月

RailsでAjaxを使ってサーバサイドと非同期通信する方法を紹介します。例として企業編集をAjaxを使って非同期で編集します。 1. 編集画面(View) Viewで企業編集画面を用意します。formで編集したい項目を囲い、submitボタンが押下されたらサーバに送られ、フロントで受け取ります。 今回はAjaxを使った非同期通信の流れを紹介するため、それ以外の処理やモデル、routes.rbやja.ymlなどの定義は適宜読み替えてください。 [crayon-6717690007923701390814/] 2. サーバサイドで編集確認処理(Controller) Viewから送られてきたパラメータを受け取り、バリデーションします(バリデーションはモデルに書いてある前提)。 バリデーションに引っかかった場合は、エラーを返します。 成功した場合は、セッションにパラメータを格納します。非同期処理なため、JSON形式で返すformat.jsonを使用します。 [crayon-6717690007927600609914/] 3. サーバからの編集確認結果を受け取る(View・CoffeeScript) サーバから帰ってきたデータはフロントで受け取ります。 バリデーションに成功した場合は、data-remodal-idがedit-modal-confirmの編集確認モーダルが呼び出されます。 バリデーションに失敗した場合は、Viewの&lt;div data-method="edit_error_message"&gt;&lt;/div&gt;にエラーメッセージを表示させます。 [crayon-6717690007928161205502/] バリデーションに成功した場合、以下の編集確認モーダルが表示されます。 モーダルに表示された編集ボタンが押下されたら、編集処理を行うアクションにデータを送ります。 [crayon-6717690007929476414665/] 4. サーバサイドで編集処理(Controller) バリエーションに成功したパラメータを先ほど格納したセッションから取り出し、編集処理を行います(実際の編集処理は割愛します)。 先ほどのCompaniesControllerに以下の処理を追記するような形です。 [crayon-671769000792c820912382/] 5. サーバからの編集結果を受け取る(View・CoffeeScript) 編集処理の結果をフロントで受け取ります。 編集処理に成功した場合は、data-remodal-idがedit-modal-completionの編集完了モーダルが呼び出されます。 [crayon-671769000792d939829727/] 編集処理に失敗した場合は、エラーモダールを表示させます。エラーモーダルは他でも使用するためApplication.js.coffeeに共通化しています。 [crayon-671769000792e496160224/] 編集に完了した場合、以下の編集完了モーダルが表示されます。 閉じるボタンを押下すると、画面がリロードされ編集された新しい情報が更新されます。 [crayon-671769000792f604737190/] 編集に失敗した場合、以下のシステムエラーモーダルが表示されます。 エラーメッセージが存在しない場合は、デフォルトのメッセージを表示するようにしています。 [crayon-6717690007930787790860/] 以上、RailsでAjaxを使った非同期処理の流れを紹介しました。

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