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

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

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

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

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

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
Harumaki

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

 

ちゃんとルーターの記述に合わせましょう。以下のように”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送信することができます。

最後に

今回はLaravelでAjaxを使う方法をご紹介しました。UXを高めるためにもジャンジャン導入したい!(Ajaxを導入しまくるのがUX向上に直結すると確信しているわけではありませんが。)

今回は以上です。  自作Webサービスのアクアリウム専門の質問サイト  → Q&Aquarium

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

Harumaki
Harumaki

Ajaxが使えるようになると、リアルにデザインの幅がグ〜〜ンと伸びました。