テックエキスパートでajaxを学んだので、１行ずつ解説しました。

完成形がこちら

非同期通信（ajax）で投稿できるようにしている。

jsonファイルのコードがこちらになります。

$(function(){
  function buildPost(post){
    var html =`<div class="content">
                ${post.text}  　　　←ユーザーがフォームに入力した値を抽出して変数htmlに代入。
               </div>`
    return html;
  }

  $("#new_post").on('submit',function(e){　←投稿ボタンが押されたらイベント発火
    e.preventDefault();　　←ページの読み込みをキャンセル。
    var formData = new FormData(this);　←ajaxからコントローラに送るためthis(form全体の要素)で取得した要素を変数formDataに代入。
    var url = $(this).attr('action');　　←ajaxにはurlも必要なので、要素のaction（/posts←HTTP）を取得して変数urlに代入。
    $.ajax({
      url: url,
      type: "post",
      data: formData,　　　　　　　　　←コントローラーへ送るためのそれぞれの形式を明記。
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(post){　　　　←ajaxが通った時の処理メソッド
      var html = buildPost(post);　　←buildPostメソッドを呼び出し。
      $('.contents').append(html);　　←帰ってきたデータをcontentsクラスにappendする。
      $('#post_text').val('')　　　←append後はフォームから文字を消すように処理。
    })
    .fail(function(){　　　　←ajaxが通らなかった時のエラー文
      alert("エラー")
    })
  });
});

$(function(){

function buildPost(post){

var html =`<div class="content">

${post.text} 　　　←ユーザーがフォームに入力した値を抽出して変数htmlに代入。

</div>`

return html;

}

$("#new_post").on('submit',function(e){　←投稿ボタンが押されたらイベント発火

e.preventDefault();　　←ページの読み込みをキャンセル。

var formData = new FormData(this);　←ajaxからコントローラに送るためthis(form全体の要素)で取得した要素を変数formDataに代入。

var url = $(this).attr('action');　　←ajaxにはurlも必要なので、要素のaction（/posts←HTTP）を取得して変数urlに代入。

$.ajax({

url: url,

type: "post",

data: formData,　　　　　　　　　←コントローラーへ送るためのそれぞれの形式を明記。

dataType: 'json',

processData: false,

contentType: false

})

.done(function(post){　　　　←ajaxが通った時の処理メソッド

var html = buildPost(post);　　←buildPostメソッドを呼び出し。

$('.contents').append(html);　　←帰ってきたデータをcontentsクラスにappendする。

$('#post_text').val('')　　　←append後はフォームから文字を消すように処理。

})

.fail(function(){　　　　←ajaxが通らなかった時のエラー文

alert("エラー")

})

});

テックエキスパート でajaxを学んだので、１行ずつ解説しました。

完成形がこちら

テックエキスパートでajaxを学んだので、１行ずつ解説しました。