Edited at

Play FrameworkでクロスドメインでJSONを扱う

More than 1 year has passed since last update.

Play FrameworkでのWEBアプリの作り方はネット上にいろいろ出回ってますが,クロスドメインでJSONを受け渡しするというのはあまり聞かない気がするのでやってみました.

ハマりポイントもあったので,備忘録がてらメモします.


環境


  • Ubuntu 14.04

  • Java 1.8

  • Scala 2.11.8

  • sbt 0.13.15

  • Play Framework 2.5.15


JSON生成

まずサーバーでJSONを生成します.

やることは単純で,http://localhost:9000/ajax にアクセスすると,ブラウザに

[{"name":"mirai","changed":"miracle"},{"name":"riko","changed":"magical"},{"name":"kotoha","changed":"felice"}]

と表示できるようにします.

まずは,typesafe activatorを使わずにPlay Frameworkを使う方法のやり方で,"hello"が出力できるところまで進めます.

"hello"が出力できたら,Application.javaにajaxメソッドを追記します.


app/controllers/Application.java

package controllers;

import play.libs.Json;
import play.mvc.Controller;
import play.mvc.Http;
import play.mvc.Result;

import java.util.*;
import java.util.ArrayList;

/**
* Created by sunda on 17/05/28.
*/

public class Application extends Controller {

public Result index() {
return ok("hello");
}

public Result ajax() {
List<Map<String, String>> list = new ArrayList<>();
list.add(new HashMap<String, String>(){
{put("name", "mirai");}
{put("changed", "miracle");}
});
list.add(new HashMap<String, String>(){
{put("name", "riko");}
{put("changed", "magical");}
});
list.add(new HashMap<String, String>(){
{put("name", "kotoha");}
{put("changed", "felice");}
});
response().setHeader(Http.HeaderNames.ACCESS_CONTROL_ALLOW_ORIGIN, " *");
return ok(Json.toJson(list));
}

}


重要なのはresponse().setHeader(Http.HeaderNames.ACCESS_CONTROL_ALLOW_ORIGIN, " *");の部分です.これがないと別ドメインからアクセスできません.

つぎにroutesを設定します.

routesに以下を追記します.


conf/routes

GET /ajax   controllers.Application.ajax()


ここでsbt runして http://localhost:9000/ajax にアクセスすると,さっきのJSONがブラウザに出力されるはずです.


AjaxでJSONを受け取る

次はクライアントサイドを書いていきます.

さっきのJSONをJavascriptで受け取って,適宜整形して表示します.


test.html

<!DOCTYPE html>

<html lang="ja">
<head>
<title>sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./test.js"></script>
</head>

<body>
<h1>JSONテスト</h1>
<div>
<dl id="precure">
</dl>
</div>
</body>
</html>


めんどくさいので,jQueryを使います.


test.js

$(function() {

$("#precure").each(function() {
var $container = $(this);
$.getJSON("http://localhost:9000/ajax", function(data){
var elements = [];
$.each(data, function(i, item) {
var name = '<dt>' + item.name + '</dt>';
var changed = '<dd>' + item.changed + '</dd>';
elements.push($(name).get(0));
elements.push($(changed).get(0));
});
$container.append(elements);
});
});

});


これで,test.htmlをブラウザで開くと,整形されたページが出てきます.たぶん.