javascript - 使用Spring，我需要将动态数据传入html来构建网页

Question

我正在使用 spring 构建一个网页，它需要使用返回动态数量元素的 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:attributes。与页面内容中的未知标记或表达式不同，Html 渲染引擎只是忽略未知属性。

这是 Thymeleaf 自然模板设计背后的主要思想，因此在静态显示页面时不会出现第三方标签和表达式的困惑。与 jsp 不同，模板处理器仅解析 th:attributes，而不解析页面中其他地方的表达式，因此您的 ${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" />

在你的 Controller 中声明一个依赖:

@Autowired
private ObjectMapper jsonMapper;

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

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