Javascript 使用Spring，我需要将动态数据传递到html以构建网页

我正在使用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}" />

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

简要说明：我使用的是HTML5，而不是JSP

---

理想情况下，我希望将API响应传递到JavaScript中，并基于该响应构建一个表。

如果您不使用JSP，您将无法在HTML或JavaScript中进行字符串替换，以将

cdata

的内容插入到文档中。即使您使用的是JSP，您的对象也需要一个有效的

toString（）

方法将其转换为可读的JSON文本。如果您想在不使用JSP的情况下将域数据放入web页面，则必须通过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);
}

---

Thymeleaf中的动态内容只能定义为标准html标记中的th:属性。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而是使用其他js框架，可能也有类似的方法。在纯js中，您只需编写更多代码

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

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

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

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

---

这里是一个动态下拉列表，没有使用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;
    }

@RequestMapping（value=“/manageCustomerConfiguration”，method=RequestMethod.GET）
公共模型和视图设置页（）{
ModelAndView模型=新的ModelAndView（“客户配置”）；
试一试{
JSONObject obj=新的JSONObject（custServe.listallcusters（））；
列表=新的ArrayList（）；
JSONArray数组=obj.getJSONArray（“returnObject”）；
对于（int i=0；i

@rbod如果你找到了一个更好的问题解决方案，你应该自己发布一个答案，这样其他有同样问题的人就可以很容易地找到它。发布部分解决方案。你觉得怎么样@willOEMYou应该将您的问题标记为

thymeleaf

，它完全改变了问题的范围。看看：啊，好吧，现在就这么做。我最近想出了一种方法，用th:each来解决我最初的问题，但这对未来的程序员来说真的很有帮助，而且更好。非常感谢你的建议。

@Autowired
private ObjectMapper jsonMapper;

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

<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;
    }