【Laravel】jQueryのAjaxでコントローラーのメソッドを実行する方法

  • コントローラーにメソッドを作る
  • ルーティングを設定する
  • $.ajax()の”url”にルーティングで設定したURLを記載する

という方法で実現できる。意外と簡単。

Ajaxでコントローラーのメソッドを実行する方法

App\Http\Controllers\HogeConttoller.php


// viewの表示
public function index() {
    return view('/hoge');
}

// このメソッドをAjaxから実行したい
public function add($id) {
    // 何らかの処理
}
routes\web.php


// viewの表示
Route::get('/hoge/', 'HogeController@index')->name('hoge');

// Ajaxで実行するメソッドのルーティング
Route::post('/hoge/add/{id}', 'HogeController@add')->name('hoge.add');
resources\views\index.blade.php


// POSTのときはCSRFトークンを付与。自作のbladeを作るときには忘れないように
// (app.blade.phpには最初から記載されているので、それを使うなら改めて追加する必要はない)


// これを押すとAjax処理がスタートする

public\js\script.js


$(function(){
    $('button').click(function() {
        // コントローラーのメソッドに渡す値
        var id = 1;

        $.ajax({
            headers: {
                // POSTのときはトークンの記述がないと"419 (unknown status)"になるので注意
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            // POSTだけではなく、GETのメソッドも呼び出せる
            type:'POST',
            // ルーティングで設定したURL
            url:'hoge/add/' + id, // 引数も渡せる
            dataType: 'json',
        }).done(function (results){
            // 成功したときのコールバック
        }).fail(function(jqXHR, textStatus, errorThrown){
            // 失敗したときのコールバック
        }).always(function() {
            // 成否に関わらず実行されるコールバック
        });
    })
});

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です