波打際のブログさん

主に、プログラミング備忘録など。

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通信を実装しました。

参考サイト

JavaGuide5