Question

我已经用ajax从控制器消耗了json响应，如下所示：

控制器：

@GetMapping("/articles/json")
@ResponseBody
public List<Article>  viewArticle(Map<String, Object> viewBag) {
    Iterable<Article> articles = articleRepository.findAll(); 
    for (Article article:articles) {
        articles1.add(article);
    }
    return articles1;
 }
@GetMapping("/articles/ajax")
    public String  viewArticlesAjax(Map<String, Object> viewBag) {

        return  "articles/list-ajax";

    }

articles.js看起来像这样

(function () {
if($('.page-articles-ajax').length > 0){
    console.log("Yea Im working",$.get);
    $.get( "/articles/json", function( data ) {
        console.log('got data',data);
        if(data && data.length){
            for(var i = 0;i < data.length; i++){
                var article = data[i];
                console.log("article",article);
            }
        }
    });
}

})();

list-ajax.html看起来像这样：

<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{fragments/layout :: layout (~{::body},'owners')}">

<body>

<h1>Articles</h1>
<div class="page-articles-ajax">



</div>

</body>
</html>

在articles / json中，返回json数组（here it is）。我想以表格格式显示json响应，其中列将为“ title”，“ description”和“ author”。作为Spring和MVC的新手，我面临许多困难。

对此有任何帮助吗？

Answer 1

我建议您使用名为DataTables的jQuery插件。这是我在生产中使用过的稳定工具。

您需要执行以下操作：

<div class="page-articles-ajax">
    <table id="articleTable">
    </table>
</div>

在js中：

$(function() {
    $('#articleTable').DataTable({
        ajax: '/articles/json'
    });
});

DataTables是一个高度可定制的插件。有关更多信息，请参见it's ajax manual。

如果您不想使用此插件，则在从后端获取响应数据后，需要使用JavaScript构建表。您可以使用jQuery的强大API轻松实现这一目标。

建议和注释：

=>更改为

@GetMapping(value = "/articles/json", produces = MediaType.APPLICATION_JSON_VALUE)

=> produce和consume这些术语是从API端点/后端的角度使用的。

从Ajax发送json数组以查看Spring MVC的难度

1 个答案: