如何使用 JQuery 和 JSON 获取 Collection<Item>

Question

我正在使用 tomcat、jsp、bootstrap、struts2、mysql、gson 开发 java 网络项目。

我有产品实体：

public class Product{
    private long id;
    private String name;
    private double price;
    private long storeId;
    //getters and setters
}

和动作控制器class ViewAllProducts:

public class ViewAllProducts extends ActionSupport {
    @Override
    public String execute() throws Exception {
        LOG.trace("Start execute");
        Collection<Product> products = productDAO.findAll();
        Gson gson = new Gson();
        JsonElement element = gson.toJsonTree(products,
                new TypeToken<Collection<Product>>() {
                }.getType());
        JsonArray jsonArray = element.getAsJsonArray();
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().print(jsonArray);
        LOG.trace("Finished execute");
        return null;
    }
}

这是我 jsp 页面中的代码，我在该页面上 Ajax 调用此操作：

<%@ include file="/WEB-INF/jspf/directive/page.jspf"%>
<%@ include file="/WEB-INF/jspf/directive/taglib.jspf"%>
<html>
<%@ include file="/WEB-INF/jspf/head.jspf"%>
<body>
    <%@ include file="/WEB-INF/jspf/menu.jspf"%>
    <div class="container" style="width: 40%">
        <div class="results"></div>
    </div>
<script type="text/javascript">
    $.ajax({
        type : 'GET',
        dataType : 'json',
        url : 'product/upload_products',
        success : function(products) {
            for ( var product in products) {
                $('#results').append(
                        'Name:' + product.name + ' Price: ' + product.price
                                + '<br>');
            }
        },
    })
</script>
</body>
</html>

当我在 Mozilla 中调试时，我看到对 ViewAllProducts 的调用成功并且返回了一些 json:

但是我在页面上看不到它，所以我在success属性中的功能不起作用。应该如何修复？

Answer 1

尝试替换

for ( var product in products) {
                $('#results').append(
                        'Name:' + product.name + ' Price: ' + product.price
                                + '<br>');
            }

和

$.each(products, function(index, product) {
    $('#results').append('Name:' + product.name + ' Price: ' + product.price + '<br>');
});

Answer 2

终于找到问题所在了。调试了很久，最后发现这么傻的错误：而不是参考 id 属性我参考了 class 属性，所以应该修改：

<div class="results"></div>

至

<div id="results"></div>

如何使用 JQuery 和 JSON 获取 Collection<Item>

How to obtain Collection<Item> using JQuery and JSON

java

jquery

ajax

json

gson