在 Play Framework 视图中使用 JSON 的示例答案

【问题标题】：Example on consuming JSON in Play Framework views在 Play Framework 视图中使用 JSON 的示例
【发布时间】：2012-07-05 16:28:23
【问题描述】：

我正在尝试在控制器中进行切换，从将 JPA 检索到的项目作为列表发送到模板引擎，现在将这些作为 JSON 发送。

我更喜欢使用 flexJSON 库来完成这项任务。

我所拥有的是一个带有该方法的应用程序控制器：

public static Result index() {

        ... Processing ...

    flash("success", "Items have been processed");
    return ok(index.render(Item.all()));
}

还有一个像这样的视图 index.scala.html：

@(items: List[Item])

@import helper._

@main("Item list") {

    <h1>@items.size() items(s)</h1>

    <ul>
        @for(item <- items) {
            <li>
                @item.title                
            </li>
        }
    </ul>
}

这些可以完美地显示所有已处理项目的无编号列表。

现在，如果我将控制器更改为使用 flexJSON，如下所示：

public static Result getItems() {
        List<Item> items = Item.all();

        String s = new JSONSerializer().exclude("*.class", "description").serialize(items);

        flash("success", "Messages have been processed");
        return ok(index.render(s));
    }

我将如何对我的模板进行编程以使用该 json 项目字符串？我试图关注这个关于此事的博客http://www.jamesward.com/2011/12/11/tutorial-play-framework-jpa-json-jquery-heroku，但在如何在我的模板视图中使用 json 方面做得不够...任何代码示例都将不胜感激。

【问题讨论】：

标签： json playframework playframework-2.0 flexjson

【解决方案1】：

试一试可能对你有帮助。

应用程序.conf

db.default.driver=org.h2.Driver
db.default.url="jdbc:h2:mem:play"
ebean.default="models.*"

路线

GET     /                           controllers.Application.index()
GET /cities             controllers.Application.all()

控制器 => Application.java

package controllers;

import play.*;
import play.mvc.*;
import models.City;
import play.libs.Json;
import views.html.*;

public class Application extends Controller {  

  public static Result index() {
    return ok(index.render());
  }



    public static Result all(){

        City pune=new City();
        pune.name="pune";
        pune.save();

        City mumbai=new City();
        mumbai.name="mumbai";
        mumbai.save();

        return ok(Json.toJson(City.all()));
      }


}

模板 => index.scala.html

<!DOCTYPE html>

<html>
<head>
<title>Sample</title>
<script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</head>
<body>
    <div id="content"></div>

    <script type="text/javascript">

    $(function(){
        get_cities();       
    });

    var get_cities = function() {       
        $.ajax({
            url: '@routes.Application.all()',
            processData:false,
            type: 'GET',
            beforeSend:function(jqXHR, settings){                   
                jqXHR.setRequestHeader("Content-Type", "application/json");                 
            },
            success: function(data, textStatus, jqXHR){                 
                process_cities(data);   
            },
            error: function(jqXHR, textStatus, errorThrown){                
            },
            complete: function(jqXHR,textStatus){                   
            }   
        });
    };

    var process_cities = function(cities){      
        var contentDiv=$("div#content");
        contentDiv.append("<ul>");            
        $.each(cities,function(i,city){
            contentDiv.append("<li>" + city.name + "</li>");
        });
        contentDiv.append("</ul>");                 
    };
    </script>
</body>
</html>

【讨论】：

我得到了您的示例中的所有内容，直到模板中的代码。我的 javascript、ajax 和 jquery 技能相当低。如果 ajax/jquery 周围真的没有，那么我可能需要几天的时间来研究这些。现在，当我执行您的示例模板时，我得到的只是一个显示我的原始 JSON 数据的文本行，并且没有 html 标签
要查看 html，只需访问 http://:/ 并查看 REST 服务输出为 json，您可以访问 http://:/cities