非同期通信の手順書

今回の前提条件

コメント機能を非同期通信にするという前提で書きます

ファイルを用意しましょう

JS内にcomment.jsを用意しましょう。
ここにajaxの記述などを書いていくのでした。
ajaxって何？

comment.jsに記述していこう

まずは以下のようにします。

$(function(){
  $('クラス名').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
  })
})

今回はコメント機能なので、form要素のクラス名を記入します。そしてonメソッドでイベントセッティングをしましょう。
そしてpreventDefaultで元々のイベントを止めることができます。
今回、ここで新しくFormDataが出てきました。

FormData

簡単にいうとformタグ内の要素のデータをJSのオブジェクトにすることです。
あ、JSにするために FormDataがあるんだ！って思っても大丈夫です。
今回引数にthisを入れてるのはinput要素の内容を取得するためです。

ajaxを書いていこう

var url = $(this).attr('action')
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false

attrメソッド

要素が持つ指定属性の値を返します。

contentType

簡単にいうと、 FormDataを使用している時は必ずfalseにします。
この認識で問題ないです。

次はcreateアクションをいじっていきます。