contentみんたくみんたくの技術ブログHome開発技術Rails【Rails】Ajaxを使った非同期処理の流れを解説2019年9月12日TwitterFacebookはてブPocketLINEFeedlyフィードRailsでAjaxを使ってサーバサイドと非同期通信する方法を紹介します。例として企業編集をAjaxを使って非同期で編集します。編集画面(View)Viewで企業編集画面を用意します。formで編集したい項目を囲い、submitボタンが押下されたらサーバに送られ、フロントで受け取ります。今回はAjaxを使った非同期通信の流れを紹介するため、それ以外の処理やモデル、routes.rbやja.ymlなどの定義は適宜読み替えてください。サーバサイドで編集確認処理(Controller)Viewから送られてきたパラメータを受け取り、バリデーションします(バリデーションはモデルに書いてある前提)。バリデーションに引っかかった場合は、エラーを返します。成功した場合は、セッションにパラメータを格納します。非同期処理なため、JSON形式で返すformat.jsonを使用します。サーバからの編集確認結果を受け取る(View・CoffeeScript)サーバから帰ってきたデータはフロントで受け取ります。バリデーションに成功した場合は、data-remodal-idがedit-modal-confirmの編集確認モーダルが呼び出されます。data-method=”edit_error_message”></div>にエラーメッセージを表示させます。'</P>'return...バリデーションに成功した場合、以下の編集確認モーダルが表示されます。モーダルに表示された編集ボタンが押下されたら、編集処理を行うアクションにデータを送ります。class="modal_text"><p>企業情報を編集します。サーバサイドで編集処理(Controller)バリエーションに成功したパラメータを先ほど格納したセッションから取り出し、編集処理を行います(実際の編集処理は割愛します)。先ほどのCompaniesControllerに以下の処理を追記するような形です。サーバからの編集結果を受け取る(View・CoffeeScript)編集処理の結果をフロントで受け取ります。編集処理に成功した場合は、data-remodal-idがedit-modal-completionの編集完了モーダルが呼び出されます。error)->Application.show_error_modal(xhr)return...編集処理に失敗した場合は、エラーモダールを表示させます。エラーモーダルは他でも使用するためApplication.js.coffeeに共通化しています。'</p>'$element.remodal().open()return...編集に完了した場合、以下の編集完了モーダルが表示されます。閉じるボタンを押下すると、画面がリロードされ編集された新しい情報が更新されます。class="modal_text"><p>編集が完了しました。onclick="location.reload();">閉じる</button></div></div>...編集に失敗した場合、以下のシステムエラーモーダルが表示されます。エラーメッセージが存在しない場合は、デフォルトのメッセージを表示するようにしています。'システムエラーが発生しました。'しばらく時間をおいてから再度お試しください。data-remodal-action="cancel">閉じる</button></div></div>...以上、RailsでAjaxを使った非同期処理の流れを紹介しました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。