[Laravel] jQueryでPostメソッドのajax通信がしたい

2021年11月13日

やりたいこと

LaravelでjQueryを使って、Postメソッドのajax通信がしたい。

実装

いきなり実装方法です。忙しい方はこちらをコピーしてお使いください。

$.ajaxSetup({
 headers: {'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')}
});
$.ajax({
 urt:'{{ route("任意のルート") }}',
 type:'post',
 headers: {'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')},
 dataType:'text',
 async:true,
 cache:false,
 data: {
  Postするデータ
 }
}).done(function(data) {
 // ajax実行後の処理
}).fail(function(){
 // ajax失敗時の処理
})

解説

では、上記のコードの解説をしていきます。

便宜上、同様のコードに番号を振ったものを以下に記載します。

$.ajaxSetup({
 headers: {'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')}　・・・①
});
$.ajax({
 urt:'{{ route("任意のルート") }}',　・・・②
 type:'post',　・・・③
 headers: {'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')},　・・・①
 dataType:'text',
 async:true,
 cache:false,
 data: {　・・・④
  Postするデータ
 }
}).done(function(data) {　・・・⑤
 // ajax実行後の処理
}).fail(function(){　・・・⑥
 // ajax失敗時の処理
})

①

LaravelではPostメソッドで送信する際に、対策が必要なのでその処理をヘッダーに記載します。

①はどちらか1つだけでも問題ありません。

②

urlの値にPostメソッドで送信したいルートを記載します。

記載方法は、通常のviewでルートを書くやり方と変わりません。

③

typeはpostにします。

④

dataに送信するデータをkey: valueの形成で記載します。

記載例は以下です。

data: {
　id: 1,
  name: annkw
}

⑤

done以降にajax実行後の処理を記載できます。

⑥

fail以降にajax通信が失敗した時の処理を記載できます。

以上！！！！！！！