LaravelでjQueryのajaxを使うときのメモです。
クロス・サイト・リクエスト・フォージェリ(CSRF)の対策を忘れてハマるのでメモしておきます。
以下はボタンが押された時、ボタンのvalueの値と、bladeで渡した値を、jsonで通信する例です。
まず通信するページに以下のmetaを書きます。
<meta name="csrf-token" content="{{ csrf_token() }}">これはLaravelのCSRF対策のトークン値で、それをJSに使います。
$(function() {
$(document).on('click', '.demo_btn', function() {
var json1 = {
"tid": $(this).attr("value"),
"pid": "{{$item->id}}"
};
//これを忘れがち
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
});
$.ajax({
url:"/demo/hoge",
type:"post",
contentType: "application/json",
data:JSON.stringify(json1),
dataType:"json",
}).done(function(data1,textStatus,jqXHR) {
//通信成功
console.log(jqXHR.status);
//$("#p1").text(jqXHR.status); //例：200とかでステータスがとれます
//$("#p2").text(JSON.stringify(data1)); //文字列に変換する例
}).fail(function(jqXHR, textStatus, errorThrown){
//通信失敗
}).always(function(){
//通信完了
});
});
});ajaxを使わないフォームの場合は、
の間に以下のトークンのロジックを入れます。これはなんとなく覚えられます。
<form>
{{ csrf_field() }}
....
</form>
ajaxで通信を書く時に、「$.ajaxSetup」の部分を私はよく忘れるので書いておきました。
参考ドキュメントはこちら
