Трудность в отправке массива JSON из AJAX для просмотра Spring MVC - PullRequest
Новая
       2

Трудность в отправке массива JSON из AJAX для просмотра Spring MVC

0 голосов
/ 20 декабря 2018

Я получил ответ json от контроллера с ajax, который выглядит следующим образом:

controller: 

@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";

    }

article.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>

в article / json, возвращается массив json ( здесь ). Я хочу показать ответ json в видеформат таблицы, где столбцы будут "заголовок", "описание" и "автор".Будучи новичком в Spring и MVC, я сталкиваюсь с трудностями.

Любая помощь с этим?

1 Ответ

0 голосов
/ 21 декабря 2018

Я бы предложил вам использовать jQuery плагин с именем DataTables.Это стабильный инструмент, который у меня есть опыт использования в производстве.

Вам нужно сделать что-то вроде этого: 

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

И в js: 

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

DataTables - это настраиваемый плагин.См. это руководство по ajax для получения дополнительной информации.

Если вы не хотите использовать этот плагин, вам нужно создать таблицу с JavaScript после того, как вы получите данные ответа от бэкэнда,Вы можете использовать надежный API jQuery для достижения этой цели.

Предложения и замечания:

=> Изменить на 

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

=> produce и consume эти термины используются с точки зрения конечной точки / бэкэнда API.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...