この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:4
ページ更新者:爽健
更新日時:2019-01-07 19:38:43

タイトル: ajaxでPOST通信する際の注意点
SEOタイトル: LaravelにおけるajaxでPOST通信する際の注意点

LaravelにおいてajaxでPOST通信する際は通常のPOST通信と同様に「csrf-token」を含める必要があります。

 

まずLayoutのheadタグ内に「csrf-token」を含める。

<meta name="csrf-token" content="{{ csrf_token() }}">

 

ajaxのパラメータにトークンを渡す。

<?php
$ajaxUrl = "/testAjax";
?>

<script>
function testFunc(id){
    
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

    url = <?php echo json_encode($ajaxUrl); ?>;

    $.ajax({
        url         : url,
        type        : 'post',
        dataType    : 'json',
        data        : {
            _token: CSRF_TOKEN,
            id    : id
        }
    })
    .done(function(response) {
        console.log(response);

        if(response['data'] != null) {

//処理

        } else {
            alert(エラー);
        }
    })
    .fail(function(response) {
        alert('エラー');
    });
};  
</script>

画像をpostする際に上記のやり方でうまくいかない場合は、以下の様にする。

    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
        url         : '/image/post',
        type        : 'post',
        cache       : false,
        contentType : false,
        processData : false,
        dataType    : "html",
        headers: {'X-CSRF-TOKEN': CSRF_TOKEN},
        data        : {
            upload_file         : upload_file,
        }
    })

 

 

コントローラー側のサンプル。(web.appにルーティングの設定を忘れずに)

public function testAjax(Request $request){
        
    $id = $request->id;

    //処理　例： dataをDBから取得を取得
        
    return response()->json(
            [
//                'data' => $collections
            ],
            200,[],
            JSON_UNESCAPED_UNICODE
        );        
    }