【Ajax通信】フォーム入力画面で非同期通信によるエラーメッセージ表示 ①

おはようございます。
今日はAjax通信を利用したフォーム送信機能の実装をまとめていけたらと思います。

Ajax通信とは

「Asynchronous JavaScript + XML」の略でブラウザが再読み込みされることなくサーバーと通信を行う通信方法です。

なぜフォーム送信機能にAjax通信を使うのか

フォーム送信した際にバリデーションエラーが起きているとき、Javascriptでエラーメッセージを表示させたいからです。
イメージはこんな感じです。

gyazo.com

実装方法

まず、Javascript側でコントローラーまでフォーム情報をJSON形式で送信するところまで書きます。
やる操作は以下の４点です。

全フォーム情報を取得し、form_dataに定義します。
FormDataオブジェクトを作成し、取得したフォーム情報を追加します。
遷移するURLを定義します。
Ajax通信するための記述を書きます。

実際に実装するとこのようになりました。

$(function(){
  $(".post__button").on("click", function(){
    var form_data = document.forms.new_set_list
    var formData = new FormData(form_data)
    var url = "/events/" + gon.event.id + "/set_lists"
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      contentType: false,
      processData: false
    })
    # コントローラーにフォーム情報を送るところまでを書いているので、割愛します。
    })
  })
})

一つ一つ詳しく見ていきます。

1. 全フォーム情報を取得し、form_dataに定義

document.forms.(フォームのname属性)とすることで＜form＞~＜/form＞で囲まれたHTMLを取得することができます。

これはDocument インターフェイスの forms プロパティが読み取り専用で、文書内に含まれるすべての＜form＞を列挙した HTMLCollection を返す仕様だからだそう
詳しくはこちらをのぞいてみて下さい。
Document.forms - Web API | MDN
HTMLCollection - Web API | MDN

2. FormDataオブジェクトを作成し、取得したフォーム情報を追加

FormDataオブジェクトとは、XMLHttpRequest を使用してサーバーにフォーム情報を送信するためのオブジェクトで、キーバリューストアの方式が取られています。
XMLHttpRequestとは、JavaScriptでHTTPリクエストを行うための組み込みのブラウザオブジェクトです。これにより、JavaScriptでサーバーとやりとりをして処理をさせたり、必要な情報を持ってくることができます。
フォーム情報の場合の使い方は、主に下の２つです。

var formData = new FormData();
formData.append("キー", "バリュー");

var formData = new FormData(document.forms.(formのname属性))

これらの方法でajax通信でフォーム情報をコントローラーに送る準備をします。
実装したコードではフォーム情報を一度に追加できる２番目の方法を採用しています。

3. 遷移するURLを定義

ここではrails routesで投稿処理を行いたいコントローラーのcreateアクションに該当するURLを確認し、定義します。
f:id:shun_0211:20200521203349p:plain

set_listsコントローラーのcreateアクションに該当するURLは「/events/:id/set_lists」となっていて、idが必要です。
idを表すのにインスタンス変数を使いたかったので、gonというGemを使用しています。
使い方は、下の記事を参考に簡単に導入することができました。

【gem gon】Railsで定義した変数をさくっとJavascriptで使う - Qiita

4. Ajax通信するための記述

ここまでで、Ajax通信を行うための準備はできたので、実際に記述を行っていきます。主に４つの指定を行います。
①　url
遷移するurlを記載します。上で定義したurlを指定します。
②　type
行うHTTPメソッドを記載します。今回はPOSTを指定します。
③　data
送信するデータを記載します。上で定義したformDataオブジェクトを指定します。
④　dataType
サーバーに送信するデータの型を記載します。今回はjsonを指定します。

その他のオプション
Ajax通信を行う際、仕様上、自動でデータを別の形に変換してしまいます。
それを防ぐため、以下の２つのオプションをつけてform.submitと同じ形式でデータを送信するようにしています。

contentType: false
processData: false

以上、復習がてらコントローラーにフォーム情報を送信するところまでまとめました。
次はコントローラー側でエラーメッセージを返すための準備までのところを書いていきたいと思います。
ここまで読んでくださりありがとうございました。
分かりにくいやアドバイス等ありましたらコメントくださると幸いです。では！