There are various ways to create a WEB application with Play Framework on the net, but I don't think I often hear about passing JSON across domains, so I tried it. There was also a addictive point, so I will write it down when I have a memorandum.
First, generate JSON on the server. It's simple to do, go to http: // localhost: 9000 / ajax and you'll be in your browser
[{"name":"mirai","changed":"miracle"},{"name":"riko","changed":"magical"},{"name":"kotoha","changed":"felice"}]
Will be displayed.
First, proceed to the point where "hello" can be output by the method of How to use Play Framework without using typesafe activator.
After "hello" is output, add the ajax method to Application.java.
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));
}
}
** The important part is ``` response (). SetHeader (Http.HeaderNames.ACCESS_CONTROL_ALLOW_ORIGIN," * ");` ``. Without this, you cannot access from another domain. ** **
Next, set routes. Add the following to routes.
conf/routes
GET /ajax controllers.Application.ajax()
If you sbt run here and access http: // localhost: 9000 / ajax, the JSON from earlier should be output to the browser.
Next, I will write the client side. Receive the JSON from earlier with Javascript, format it appropriately and display it.
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 test</h1>
<div>
<dl id="precure">
</dl>
</div>
</body>
</html>
It's annoying, so I use 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);
});
});
});
Now, when you open test.html in your browser, you will see a formatted page. maybe.
Recommended Posts