Playframework2.0でカッコ良くAjax通信を実装する方法
はじめに
javascript(jQuery)からPlayframeworkへのAjax通信は、通常のAjax通信の方法で実装することができます。
通常の実装方法で特に問題はありませんが、もしサーバー側の仕様を変えることになってAjaxのリクエスト先が変わってしまった場合、javascriptを変更する手間が発生します。
その手間を惜しむ人向けの javascriptRouter という機能がplayframeworkには存在していました。
今回はjavascriptRouterを使用し、カッコ良くAjax通信をしてみます。
コーディング
Application.java
Ajax通信用のgetTest、postTest、javascriptRouter生成用のgetJSRoutesアクションを定義します。
package controllers; import play.Routes; import play.mvc.Controller; import play.data.DynamicForm; import views.html.index; public class Application extends Controller { public static Result index() { return ok(index.render()); } public static Result getTest(String message) { return ok("get:" + message); } public static Result postTest() { DynamicForm form = new DynamicForm().bindFromRequest(); return ok("post" + form.get("message")); } public static Result getJSRoutes() { return ok( Routes.javascriptRouter("jsRoutes", controllers.routes.javascript.Application.getTest(), controllers.routes.javascript.Application.postTest() ) ); } }
getTestとpostTestはそれぞれ、get/postでアクセスし、リクエスト中のmessageを取得し、頭にメソッド名をつけてオウム返しにしています。
getJSRoutesアクションでは、javascriptRouter を jsRoutes という名前で生成し、レスポンスとして返しています。
第一引数はルータ名、第二引数以降はルーティングしたいアクションを
controllers.routes.javascript.コントローラー.アクション()
という形で追加できます。
conf/routes
作成したアクションのルートを定義します。
# Routes GET / controllers.Application.index() GET /getTest/:message controllers.Application.getTest(message:String) POST /postTest controllers.Application.postTest() GET /assets/javascripts/routes controllers.Application.getJSRoutes() # Map static resources from the /public folder to the /assets URL path GET /assets/*file controllers.Assets.at(path="/public", file)
getJSRoutesのルート定義を /assets/javascripts/routes に設定していますが、 /assets/javascripts を指定せずに /routes でも問題なく動作します。
index.scala.html
生成された javascriptRouter(jsRoutes) を埋め込み、ajax通信を行います。
<!DOCTYPE html> <html> <head> <title>Ajaxテスト</title> <script type="text/javascript" src="@routes.Application.getJSRoutes()"></script> <script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script> </head> <body> <script> jsRoutes.controllers.Application.getTest('テスト').ajax({ 'success' : function(data){ alert(data); } }); jsRoutes.controllers.Application.postTest().ajax({ 'data' : { 'message' : 'テスト' }, 'success' : function(data){ alert(data); } }); </script> </body> </html>
scriptタグのsrcに @routes.Application.getJSRoutes() を指定して javascriptRouter(jsRoutes) を埋め込みます。
bodyのscriptタグ内で、jsRoutes を使ってカッコ良くajax通信を実装しました。