Laravel と Ajax で値の受け渡して非同期処理。WEBページの更新無しで表示内容の取得が可能

プログラミング系

Laravel-ajax

2022.01.01 2019.08.26

CSRF の対策処理

HTMLヘッダーに以下のメタタグを付けましょう。付けないとエラーでAjaxが利用できません。

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

JavaScript(jQuery) 記述

$(function() {
    $('#excute').on('click', function() {
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },//Headersを書き忘れるとエラーになる
            url: '/laravel/ajax',//ご自身のweb.phpのURLに合わせる
            type: 'POST',//リクエストタイプ
            data: {'user_id': {{ Auth::id() }}, 'text': 'Ajax成功'},//Laravelに渡すデータ
            contentType: false,//渡すデータによって必要(文字列だけなら不要)
            processData: false,//渡すデータによって必要(文字列だけなら不要)
        })
        // Ajaxリクエスト成功時の処理
        .done(function(data) {
            // Laravel内で処理された結果がdataに入って返ってくる
            $('#message').text(data);
        })
        // Ajaxリクエスト失敗時の処理
        .fail(function(data) {
            alert('Ajaxリクエスト失敗');
        });
    });
});

Laravel

[ WEB.php ]

Route::post('laravel/ajax','AjaxController@ajaxMessage');

[ AjaxController.php ]

public function ajaxMessage(Request $request){
    $data = $request->all();
    $message = $data['text'];
    return $message;
}