使用Spring时，我需要将动态数据传递给html以构建web页面
我正在使用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方法)
快速附注:我使用的是HTML5，而不是JSP。
理想情况下，我希望将API响应传入JavaScript，并基于该响应构建一个表。
回答 3
Stack Overflow用户
发布于 2015-04-01 20:36:23
Thymeleaf中的动态内容只能定义为标准html标记内的th:属性。与页面内容中的未知标记或表达式不同，Html呈现引擎只忽略未知属性。
这是Thymeleaf自然模板设计背后的主要思想，因此在静态显示页面时不会出现第三方标记和表达式的混乱。与jsp不同，模板处理器只解析th:属性，而不解析页面中其他地方的表达式，这就是为什么您的${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);Stack Overflow用户
发布于 2015-03-31 01:54:46
如果您没有使用JSP，那么您将无法在HTML或JavaScript中进行字符串替换来将cdata的内容插入到文档中。即使您使用的是JSP，您的对象也需要一个有效的toString()方法来将其转换为可读的JSON文本。如果您希望在不使用JSP的情况下将域数据放入web页面，则必须通过AJAX获取这些数据。假设您的customer对象没有任何复杂的嵌入式对象，您应该能够非常容易地将它们序列化，并将它们作为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
});Stack Overflow用户
发布于 2015-04-03 03:50:32
这是一个没有使用spring的jquery的动态下拉列表。
<select name="CustomerList" th:field="*{cdata}">
<option th:each="task : ${cdata}" th:value="${task}"
th:text="${task}"></option>
</select>在Spring这一边
@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;
}https://stackoverflow.com/questions/29349686
复制相似问题