非同期通信(Ajax)

1. ビューファイル上でイベントを発火させる
2. イベントを検出する(sample.jsのl. 1)
3. $.ajaxでコントローラを指定して値を渡す

雛形

$("要素指定").on("イベント指定", function(){
  // 変数定義

  $.ajax({
      type: 'HTTPメソッド',    // type, urlの組でアクションを指定
      url: 'アクションに対応するurl',
      data: { キー: 値 }, 
      dataType: 'json'
  })

  .done(function(変数){
  //処理を記述

  })
})

• 1行目の要素はテキストフィールド(input要素など)

$.ajax 内のキーとバリュー

ajaxのリクエストに関する設定を行う
- type:とurl: で値を渡したいコントローラーとアクションを指定する
- data: サーバーへ送信するデータ
- dataType: jsonで非同期通信を実装するので"json"
- FormDataを使うときは以下の設定を追加
- processData: false,
- contentType: false

(渡された値の確認は送信先のコントローラでbinding.pryをする)

jbuilderは上のアクションの名前にするconsole.log(JSON.stringify())でjsonを確認できる

.done

doneの第一変数にはdataを渡す。これはjbuilderで定義されたもの。
- 要素を追加
- 要素を削除

.fail