[Laravel入門]jQueryでAjax通信を行う

2020年5月16日

こんにちは、はるまきです。今回は「自作Webサービス解説シリーズ」です。今回で第15回目！　

今回は、jQueryでAjax通信を行います。Ajax通信を使うと非同期に通信ができて、UXが非常に高まります。いちいち画面遷移をしなくてもデータの更新ができたり、非常に便利！

自作Webサービスのアクアリウム専門の質問サイト→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。

1. jQueryがAjax関数を用意してくれている！
- 1.1. GETメソッド
- 1.2. POST通信
2. 最後に

jQueryがAjax関数を用意してくれている！

もう世の中、なんでも人様で作ってくれています。世界の頭いい人がそれらを作り、僕のような人はそれを使わせてもらうと、、、。そんな感じですわ。

実際のコードを見てみよう！まずは、よりシンプルなGET通信から。

GETメソッド

        $.ajax({
            url:'hogeABC',
            type:'GET',
        }).done(function(json){
            alert('ajax成功');
        }).fail(function(json){
            alert('ajax失敗');
        });

urlに’hoge’を指定しています。これはルーラー側に合わせないといけません。他のサイトを見ると、”xxx/xxx/xxxxxx”などの普通のパスで書かれていると思いますが、Laravelの場合は、ルーターに合わせましょう。

Harumaki

僕はルーターに合わせることを知らなくて１時間くらいハマりました。。。。

ちゃんとルーターの記述に合わせましょう。以下のように”hogeABC”なら、"hogeABC"としよう。

	Route::get('hogeABC', 'HogeController@hogehogehoge');

次に、TypeはGETとします。POST通信がしたいなら、”POST”にすればOKです。

また、通信が成功したあとの処理はdone()に、通信が失敗した時の処理はfalse()に記述します。シンプルな構造も嬉しい。

あとはコントローラーで、自分の好きな処理を記述すればOKです。

 public function hogehogehoge(Request $request) {
   //好きな処理
   
     return response()->json([
            'value' => 'あいうえお',
            'name'  => 'かきくけこ',
            ]);
 }

ここで送った"あいうえお"は、js側でjson['val’]で取得することできます。

       $.ajax({
            url:'hogeABC',
            type:'GET',
        }).done(function(json){
          	alert(json['value'])//コントローラーから送られてくる値を取得できる。
        }).fail(function(json){
            alert('ajax失敗');
        });

POST通信

POST通信はちょいとややこしい。認証を入れないといけない。これが結構見落とされる。

テンプレは以下。

        var id = 123;//thanksを送りたい回答の主キー"id"
        var messege = "こんにちは";

　　　　 $.ajax({
           url:'postHoges',
           type:'POST',//①
           dataType:'json',//②
           data : {//③
               id:id,
               messege:messege,
           },
           headers : {
           'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')//④
           },
       }).done(function(json){
　　       //成功した時の処理
　　    }).fail(function(json){
　　　　　  //失敗した時の処理
　　    });

 <meta name="csrf-token" content="{{ csrf_token() }}">//htmk側にもトークンを設定する必要がある！

ポイントは、

①：POST通信
②③：dataをjsonでコントローラーに渡していること
④：トークンを設定していること。HTML側にも設定する必要がある。

です。③で設定した値は、コントローラーに渡されます。

  Route::post('postAjaxHoge', 'HogeController@postHogeHoge');// POSTで！

    public function postHogeHoge(Request $request) {//Requestクラスで！
      //値受け取り
      $id       = $request->id;
      $messege         = $request->messege;         
    
      //適当な処理
      
      return response()->json([
            'responseData' => '成功しました。'
            ]);
    }

以上のような感じでPOST送信することができます。