Il existe différentes façons de créer une application WEB avec Play Framework sur le net, mais je ne pense pas entendre souvent parler de passer du JSON entre les domaines, alors je l'ai essayé. Il y avait aussi un point addictif, alors je vais en prendre note lorsque j'aurai un mémorandum.
Tout d'abord, générez JSON sur le serveur. C'est simple à faire, allez sur http: // localhost: 9000 / ajax et vous serez dans votre navigateur
[{"name":"mirai","changed":"miracle"},{"name":"riko","changed":"magical"},{"name":"kotoha","changed":"felice"}]
Sera affiché.
Tout d'abord, passez au point où "hello" peut être généré par la méthode de Comment utiliser Play Framework sans utiliser l'activateur de typeafe.
Une fois "bonjour" sorti, ajoutez la méthode ajax à 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));
}
}
** La partie importante est `response (). SetHeader (Http.HeaderNames.ACCESS_CONTROL_ALLOW_ORIGIN," * ");`. Sans cela, vous ne pouvez pas accéder à partir d'un autre domaine. ** **
Ensuite, définissez les itinéraires. Ajoutez ce qui suit aux itinéraires.
conf/routes
GET /ajax controllers.Application.ajax()
Si vous exécutez sbt ici et accédez à http: // localhost: 9000 / ajax, le JSON précédent doit être affiché dans le navigateur.
Ensuite, j'écrirai le côté client. Recevez le JSON précédent avec Javascript, formatez-le correctement et affichez-le.
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>Test JSON</h1>
<div>
<dl id="precure">
</dl>
</div>
</body>
</html>
C'est ennuyeux, alors j'utilise 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);
});
});
});
Désormais, lorsque vous ouvrez test.html dans votre navigateur, vous verrez une page formatée. peut être.
Recommended Posts