Laravel5でAjaxを使う

2018.1.20 (土)

Laravl5ではPOSTのときにCSRFトークンを必ず使うというのがコツというだけでその他は普通のAjaxと同じです。

GETする

DEMO
GETする際にはCSRFトークンは必要ないので、そのまま返り値を取得するという感じになります。

/* routes */
Route::get('/ajax/get_json', function(){ return view('develop.ajax_get_json'); });
Route::get('/api/ajax/get_json', 'Test\TestController@ajax_get_json');

コントローラからjsonを返してあげるようにすればOKです。いろいろ細かいことやりたいときはresponce()で返してあげればよいと思います。単純なものであれば配列を返してやるとjson形式で拾ってくれます。

// app/Http/Controllers/Test/TestController.php
public function ajax_get_json() {
/* get:json */
    $json = array(
        "foo" => "aaaa",
        "bar" => "bbbb",
    );
    return $json;
}

このメソッドをAjaxでたたきます。
bladeでは普通にAjaxを書いてあげます。

<!--resource/view/develop/ajax_get_json.blade.php-->
// JS部分
$(function(){
    $("#ajax").on('click',function(){
        $.ajax({
            url: "/api/ajax/get_json",
            type: "get",
            dataType: 'json',
            timeout:1000,
        }).done(function(data){

            /* 取得したjsonデータのパース */
            $.each(data, function(k,v){
                $("#out").append(k+": ");
                $("#out").append(v+"<br>");
            });
        });
    });
});

// HTML部分
<a href="#" id="ajax">Get json data</a><br>
<span id="out"></span>

これで配列の値をjsonで取得できます。jsonの値は適当に加工して使う。

POSTする

DEMO
実際はpostデータを取得してあれこれしてから配列を返すというのが単純なストーリーであると思いますがここでは端折ります。

Route::get('/ajax/post_json', function(){ return view('develop.ajax_post_json'); });
Route::post('/api/ajax/post_json', 'Test\TestController@ajax_post_json');

今度はpostメソッドでやります。なのでコントローラ部分もRequestを受け取るようにしてあげます。postされたデータはテスト的にそのまま配列に入れて返してあげてます。

public function ajax_post_json(Request $request) {
/* post:json */

    $info = array(
        "id" => $request->input('id'),
        "name" => $request->input('name'),
        "description" => "ajax json test",
        "status" => "active",
    );
    return $info;
}

HTML部分ではCFRFトークンを設定する必要があります。教科書的にはmetaデータに仕込んで複数の機能から呼び出せるようにしておくといった感じになってますので、そういうやり方にしてみます。

<!--resource/view/develop/ajax_post_json.blade.php-->
// JS部分
$("#ajax").on('click',function(){
    $.ajaxSetup({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
    });
    $.ajax({
        url: "/api/ajax/post_json",
        type: 'post',
        dataType: 'json',
        data : {
            "id" : "9999",
            "name" : "osamuya"
        },
    }).done(function(data){
        console.log(data);
        /* 取得したjsonデータのパース */
        $.each(data, function(k,v){
            console.log(k,v);
            $("#out").append(k+": ");
            $("#out").append(v+"<br>");
        });
    });
});

<!--metaにcsrf-tokenを設定-->
<meta name="csrf-token" content="{{ csrf_token() }}">
...
// HTML部分
<a href="#" id="ajax">Get json data</a><br>
<span id="out"></span>