从ajax发送json数组以查看spring mvc的困难答案

【问题标题】：Diffculty in sending json array from ajax to view spring mvc从ajax发送json数组以查看spring mvc的困难
【发布时间】：2019-05-20 16:56:39
【问题描述】：

我使用 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>

在文章/json 中，返回 json 数组 (here it is)。我想以表格格式显示 json 响应，其中列是“标题”、“描述”和“作者”。作为 Spring 和 MVC 的新手，我面临着困难。

有什么帮助吗？

【问题讨论】：

您能否在您想使用文章响应的地方显示视图代码？
@Rentius2407 添加到编辑部分:)
@ProteetiProva 您能否用通俗的方式解释一下您要达到的目标？
@MinarMahmud 以我的新手知识，我试图尽可能地简化。编辑了问题

标签： javascript java ajax spring-boot spring-mvc

【解决方案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 端点/后端的角度使用的。

【讨论】：