ajaxの処理 大変細かく書いたもの。

ajaxの中身

練習の時
画面上でタスクの「表示」ボタンを押すと

タスクタイトルとタスクの内容が表示される

という仕組みのものを作りました。
その時のメモ書きです。
（あとでまとめる）

laravel ver5.8 + jQuery

jQueryのコードです。

// ボタンを押すとjsが起動する
  $('.js_show_info').on('click',function(){
    // タスクのIDを取得する（jsで使う変数に、viewでinputのvalueに入っているIDをいれる）
    task_id = $(this).val();
    console.log(task_id);

    $.ajax({
      type: "get",  // HTTP通信の種類を指定。デフォルトでここはgetが入っている部分なので、get通信なら書かなくても大丈夫
      url: "tasks/info",  // web.phpで作成したコントローラーにアクセスするルートのURL部分。コントローラー内に作成したfunctionにアクセスしたい。
      dataType: "json",  //サーバーから返されるデータの型を指定。
      data: {  //サーバーに送るフォームデータを作成
        task_id: task_id
      },
      // ajax通信でサーバー側に送って、サーバーでデータをうまいこと処理して無事に返ってきたらdoneの中の処理に進む
    }).done(function(dataJson,status,xhr){
        // 今回はdataTypeですでにjsonを指定しているので以下のコードは使わない。
        // JSON.parse() = 文字列を JSON として解析し、文字列によって記述されている JavaScript の値やオブジェクトを構築するメソッド
        // 今回はサーバーから返ってくるときに（＝レスポンス）中身はJSON形式になっているから上のメソッドを使わなくても大丈夫。
        // var data = JSON.parse(dataJson);
        $str = "タスクタイトル：" + dataJson.title + "\n" +
               "タスクの内容：" + dataJson.category;
        alert($str);
        // 処理が何らかの原因でうまく行かず（サーバー側が悪い、もしくはjs側が悪い場合）、だめだった場合にはしる処理を書く
    }).fail(function (jqXHR, textStatus, errorThrown){
      alert("通信に失敗しました");
    });
  });

申し訳ないくらいの走り書き

自分のメモ書きだから。