如何在springboot控制器中将json数据返回到javascript?

时间:2019-04-28 09:39:27

标签: javascript spring-boot controller thymeleaf bootstrap-table

如何将json数据返回给javascript,以便引导表可以使用它?(我想在javascript中对其进行初始化)

我将springboot用作后端,使用bootstrap设计html页面,并使用bootstrap表显示数据。此html页面完全加载后,应使用控制器中的json数据初始化此引导表。

阻止我的是,我不知道如何将json数据返回给javascript,因此bootstrap-table可以使用它。

在控制器中,如果我以字符串形式返回模板,则无法返回我的json数据;如果我返回json数据并添加一个@ResponseBody,我仅获得带有json字符串的页面,那么我将无法到达模板使用json数据初始化引导表。

控制器的一些代码:

ArrayList<AISResponse> aisResponses = new ArrayList<AISResponse>();
AISResponse aisResponse = new AISResponse();
aisResponse.setAISPath(AISPath);
aisResponse.setTmID(tmID);
aisResponse.setTmName(tmName);
aisResponses.add(aisResponse);
model.addAttribute("aisResponses", aisResponses);
return "AIS/UI_AIS_Properties"

html页面上的一些代码:

<table id="table" data-toggle="table" data-pagination="true"
        data-search="true" data-page-size="30">
        <thead>
            <tr>
                <th data-sortable="true">AISPath</th>
                <th data-sortable="true">TM Name</th>
                <th data-sortable="true">TM ID</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="r:${aisResponses}">
                <td th:text="${r.AISPath}"></td>
                <td th:text="${r.tmID}"></td>
                <td th:text="${r.tmName}"></td>
            </tr>
        </tbody>
    </table>

目前,我正在使用Thymeleaf迭代aisResponses,因此可以在表中显示数据。 但是我想通过直接将json数据返回给javascript来初始化javascript中的表,我认为这会使我的html页面更加清晰。

1 个答案:

答案 0 :(得分:0)

在这种情况下,您可以使用ModelAndViewModel。两者都用于在Spring MVC应用程序中定义模型。模型为模型属性定义了一个持有人,并且主要用于向模型添加属性。您的代码应如下所示。

@RestController
public class YourController{

    @GetMapping
    public ModelAndView getAisList(){

    ModelAndView   modelView = new ModelAndView ("AIS/UI_AIS_Properties");

    ArrayList<AISResponse> aisResponses = new ArrayList<AISResponse>();
    AISResponse aisResponse = new AISResponse();
    aisResponse.setAISPath(AISPath);
    aisResponse.setTmID(tmID);
    aisResponse.setTmName(tmName);
    aisResponses.add(aisResponse);

    modelView.addObject("aisResponses", aisResponses);
    return modelView;

        }             
    }