Question

我使用spring构建一个网页，需要使用API调用来构建表，该API调用返回动态数量的元素。

以下是我现在所拥有的：

@RequestMapping(value = "/managecustomerconfigurations", method = RequestMethod.GET)
public ModelAndView setUpPage(){
    ModelAndView model = new ModelAndView("customerconfigurations");
    model.addObject("cdata", custServe.listAllCustomers());
    return model;
}

如果我输入

，我可以在我的网页上获得cdata

<p th:text="'Customer:' + ${cdata}" />

但如果我输入

，我就看不到了

${cdata}

或者如果我将数据放在任何JavaScript中（即使我使用onload方法）

快速旁注：我使用的是HTML 5而不是JSP。

理想情况下，我希望将API响应传递给JavaScript，并根据该响应构建一个表。

Answer 1

Thymeleaf中的动态内容必须仅定义为标准html标记内的th：属性。与页面内容中的未知标记或表达式不同，Html渲染引擎会忽略未知属性。

这是Thymeleaf自然模板设计背后的主要思想，因此静态显示页面时不会出现第三方标签和表达的混乱。与jsp不同，模板处理器仅解析属性，而不解析页面中其他位置的表达式，这就是${cdata}在th:text之外无效的原因。

我相信（我已经成功地在生产中使用它）以非ajax方式将后端数据传递给javascript的最简洁方法是使用html5数据属性。 Html5允许以data-为前缀的任意属性而不抱怨。

因此，您可以使用容器div来传递数据，如下所示：

<div id="Some-Container" th:attr="data-someDescription=${cdataJson}"></div>

然后，如果您使用jQuery，您可以轻松地将所有html5数据属性检索为jQuery数据：

$("#Some-Container").data("someDescription");

如果不使用jQuery而是使用其他一些js框架，可能会有类似的方法。在普通的js中你只需要编写更多的代码。

现在，为了将您的数据导出为json格式的文本，以便javascript易于使用，您首先要在应用程序上下文中添加一个对象映射器：

<bean id="jacksonObjectMapper" class="org.codehaus.jackson.map.ObjectMapper" />

在控制器中声明一个依赖项：

@Autowired
private ObjectMapper jsonMapper;

然后，当您添加模型属性时，使用对象映射器将数据转换为json：

String cDataJson = jsonMapper.writeValueAsString(custServe.listAllCustomers());
model.addAttribute("cdataJson", cDataJson);

Answer 2

如果您不使用JSP，则无法在HTML或JavaScript中进行字符串替换，以将cdata的内容插入到文档中。即使您使用的是JSP，您的对象也需要一个有效的toString()方法将其转换为可读的JSON文本。如果您想在不使用JSP的情况下将域数据放入网页，则必须通过AJAX获取它。假设您的客户对象没有任何复杂的嵌入对象，您应该能够非常轻松地对它们进行序列化，并将它们作为JSON读入您的页面。

创建一个用于处理AJAX请求的新控制器方法：

@RequestMapping(value = "/customerdata", method = RequestMethod.GET, produces = { "application/json" })
public ResponseEntity<List<Customer>> getCustomerData(){
    List<Customer> customers = custServe.listAllCustomers();
    return new ResponseEntity<>(customers, HttpStatus.OK);
}

然后在JavaScript中请求您网页上的数据：

var cdata;
$.ajax({
   url: "/customerdata",
   dataType: "json",
   method: "get"
}).done(function(data){
    cdata = data;
    //do stuff
});

Answer 3

这是一个没有使用spring的jquery的动态下拉列表。

<select name="CustomerList" th:field="*{cdata}">

    <option th:each="task : ${cdata}" th:value="${task}"
        th:text="${task}"></option>

</select>

在春天方面

    @RequestMapping(value="/managecustomerconfigurations", method=RequestMethod.GET)
    public ModelAndView setUpPage(){
        ModelAndView model = new ModelAndView("customerconfigurations");
        try{
            JSONObject obj = new JSONObject(custServe.listAllCustomers());

            List<Integer> list = new ArrayList<Integer>();

            JSONArray array = obj.getJSONArray("returnObject");
            for(int i = 0 ; i < array.length() ; i++){
                int j = array.getJSONObject(i).getInt("id");
                list.add(j);
            }
            model.addObject("cdata", list);
        }
     return model;
    }

使用Spring，我需要将动态数据传递给html来构建一个网页

3 个答案: