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>
Last update: 2016.11.04 (金)