Laravel5でAjaxを使う

結果からいってしまうと普通にhttpリクエスするだけという話になります。ルーティングのみでAjaxとして値を返すとかもできますが、普通に複雑な処理をする上ではコントローラを通した方が無難かと思われます。

ルーティング

/ajaxtest/に何らかの文字列という感じでLaravel5の持つポテンシャルを活用するように設定。この時点でよくやるPOSTでのAjax通信ではなくGETになります。GETはセキュリティー云々言われますがLaravel5の場合はこの時点で安全。完全にエスケープされてます。例外処理ぐらいはちゃんとしておいた方がいいかもです。

Route::get('/ajaxtest/{testcode}', 'AjaxController@indextest');

コントローラ

ルーティングから受けたコントローラは、普通に書くだけです。がGETメソッドなのにコントローラではあたかもPOSTされているように書きます。というのは内部的にはPOSTされているからです。なので$requestで受けます。ルーティングで示した最後のパス{testcode}はいわば変数なので、ここでは$request->testcodeとしてオブジェクトで受け取れます。ややこしい。最後に例のbladeに返さないで直接jsonとしてレスポンスするだけです。

public function indextest(Request $request)
{
    $response = array();
    $response["status"] = "OK";
    $response["message"] = $request->testcode;
    return Response::json($response);
}

アクセスしてみる

でこんな感じでアクセスする。/ajaxtest/hogehogeとか/ajaxtest/foobarとかいろいろ。

http://example.com/ajaxtest/hogehoge

結果

と、与えた値で返ってきます。

{"status":"OK","message":"hogehoge"}

Javascript

とはいってもこのサンプルのままだと動的にはならないのでurl:のところは多少動的にすることになります。

url: ‘ajaxtest/’+valみたいな感じで。

返り値はjosnにしたので、オブジェクトで返ってきます。ブール値で返すとしてもjsonの方が便利でしょう。

$(function(){
    $.ajax({
        type: 'get',
        datatype: 'json',
        url: 'ajaxtest/hogehoge'
    })
    .done(function(data){ //ajaxの通信に成功した場合
        alert("success!");
        console.log(data['status']);
        console.log(data['message']);
        $("#example").html(data['status']+' '+data['message']);
    })
    .fail(function(data){ //ajaxの通信に失敗した場合
        alert("error!");
    });
});
</script>

HTML（おまけ、いらないか。）

<div id="example"></div>