非同期通信でTodoの保存を行うアプリケーションのJSを細かくみてみる。

アプリは以下のような物

jsファイル、コントローラー、ビューは以下の通り。

todo.js

$(function() {

  function buildHTML(todo) {
    var html = $('<li class="todo">').append(todo.content);
    return html;
  }

  $('.js-form').on('submit', function(e) {
    e.preventDefault();
    var todo = $('.js-form__text-field').val();
    $.ajax({
      type: 'POST',
      url: '/todos.json',
      data: {
        todo: {
          content: todo
        }
      },
      dataType: 'json'
    })
    .done(function(data) {
      var html = buildHTML(data);
      $('.todos').append(html);
      $('.js-form__text-field').val('');
    })
    .fail(function() {
      alert('error');
    });
  });
});

index.html

<div class="contents">
  <%= form_for @todo, html: { class: 'form js-form' } do |f|%>
    <%= f.text_field :content, class: 'form__text-field js-form__text-field' %>
    <%= f.submit class: 'form__submit js-submit' %>
  <% end %>
  <ul class="todos">
    <%= render @todos %>
  </ul>
</div>

todo_controller.rb

class TodosController < ApplicationController
  def index
    @todo = Todo.new
    @todos = Todo.order('created_at ASC')
  end

  def create
    @todo = Todo.create(todo_params)
    respond_to do |format|
    # respond_to メソッドでリクエストがHTMLのレスポンス求めているのか、
    # それともJSONのレスポンス求めているのか,条件分岐させる。
      format.html { redirect_to :root }  # htmlリクエストの場合
      format.json { render json: @todo}  # jsonリクエストの場合
    end
  end

  private
  def todo_params
    params.require(:todo).permit(:content)
  end
end

・Json

Rubyのハッシュと同様、キーとバリューの組み合わせでデータを表現するデータ記述形式。
表示形式は下記参照
{user_name: "testさん", created_at: "2019-08-28T10:35:13.000+09:00", content: "これがJSONの形です！", image_url: null, id: 6}

以下でjsファイルを細かく見ていく

todo.js

$(function() {    // function で以下が関数であると定義する

  function buildHTML(todo) {
    var html = $('<li class="todo">').append(todo.content);  //todoの内容をcontentに追加する。
    return html;  //controllerで設定された処理を実行する　（format.html { redirect_to :root }）
  }

  $('.js-form').on('submit', function(e) {   //イベントの設定（submitイベント(クリックorエンターキー)が行われた際に処理が行われる。）
    e.preventDefault();   //デフォルトの、通信処理を通じてホームを送信する処理を止めている
    var todo = $('.js-form__text-field').val();
    $.ajax({  // 非同期通信を行うための記述。
      type: 'POST', // HTTP通信の種類を記述している。GETとPOSTの２種類がある。
      url: '/todos.json',data: {todo: {content: todo}},dataType: 'json'})  // わかりやすいように引数の部分を一列にした
      // url:リクエストを送信する先のURLを記述する。
      // data:サーバに送信する値を記述する。
      // dataType   :サーバから返されるデータの型を指定する。
    .done(function(data) {   // 非同期通信が成功した際の処理
      var html = buildHTML(data);   // HTMLのレスポンスに関して、buildHTML(data) の処理を実行する
      $('.todos').append(html);   // 記入された内容をHTMLに追加する。
      $('.js-form__text-field').val('');  // 未記入の時には追加しないというバリデーションを設定している
    })
    .fail(function() {   // 非同期通信が失敗した際の処理
      alert('error');   //error というアラート文を表示する。
    });
  });
});

現状の理解はこのようなイメージ。
誤りがございましたらご教示ください。