用途
新着
履歴
分類

Laravel 非同期通信

Laravel 非同期通信

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」の部分を私はよく忘れるので書いておきました。

参考ドキュメントはこちら

https://readouble.com/laravel/5.8/ja/csrf.html

公開 2019-08-27 23:21:23
更新 2019-12-23 23:06:33
このページの二次元コード
Laravel 非同期通信

人気のサンプル

search -  category -  about
© 2024 kipure
Top