在 Spring/jQuery 中更改 JSON

Question

我正在 Spring 创建一个 web 应用程序，我遇到了一个对我来说非常困难的问题。在我的控制器中，我有方法：

@RequestMapping(value="/add", method = RequestMethod.POST)
public @ResponseBody List<Word> addNewWord(@RequestBody Word word, Principal principal) {
    wordService.addNewWord(word, principal.getName());
    return getCurrentWords(principal.getName());
}

protected List<Word> getCurrentWords(String username) {
    List<Word> accountWords = new ArrayList<Word>();
    accountWords.addAll(wordService.listUserWords(username));
    return accountWords;
}

返回结构如下的 JSON 对象 [这是一个示例]：

[
 {"word":"battle","wordId":165},
 {"word":"better","wordId":161},
 {"word":"bread","wordId":167},
 {"word":"cool","wordId":158},
 {"word":"fight","wordId":166},
 {"word":"forest","wordId":163},
 {"word":"list","wordId":160},
 {"word":"roll","wordId":164},
 {"word":"semicolon","wordId":168},
 {"word":"super","wordId":139},
 {"word":"thing","wordId":162},
 {"word":"word","wordId":159}
]

在我的 jquery 文件中，我有一个代码：

$("#add_word_submit").click(function(e) {
    e.preventDefault();
    $("#add_word_input").focus();
    var word = $('#add_word').serializeObject();
    $.postJSON("words/add.html", word, function(words) {
        $("#add_word_input").val("");
        showDividedAccountWords(words);
    });
});

function showDividedAccountWords(words) {

var accountWords = new Object();
accountWords.words = words;

wordListTemplate = 
"{{#words}}" +
  "<ul class='word_list'>" +
    "<li class='word'>" +
        "<strong>{{wordId}}: </strong>" +
        "<span>{{word}}</span>" +
    "</li>" +
  "</ul>";
"{{/words}}" +


var accountWordsHTML = Mustache.to_html(wordListTemplate, accountWords);
$("#words").html(accountWordsHTML);
}

当我通过单击 #add_word_submit 提交表单时，jquery 发送 JSON 对象 [新的 Word 对象]到 Spring 控制器，后者获取当前用户单词列表。当前单词列表作为 JSON 对象返回（我在上面粘贴），接下来它在我的 Mustache.js 模板中使用。

一般来说，当我添加新单词时，我想通过 ajax 自动刷新用户单词列表。到目前为止，一切都很好并且工作得很好，但我希望输出略有不同。现在我得到一个 ul 列表：

<ul class="word_list">
  <li class="word"><span>1: Word</span></li> [1]
  <li class="word"><span>1: Word</span></li> [2]
  <li class="word"><span>1: Word</span></li> [3]
  ...
  <li class="word"><span>1: Word</span></li> [13]
</ul>

但我想要一个输出，当我通过 JSON 获取当前单词列表时 [如上所示]，我想将其分为许多 ul 列表，其中最多只有 10 个单词。因此，如果我有像上面 [13 个单词] 这样的 JSON 世界列表，我希望有一个包含 10 个单词的列表，下一个包含 3 个单词的列表，依此类推，当有更多单词时。

<ul class="word_list">
  <li class="word"><span>1: Word</span></li> [1]
  <li class="word"><span>1: Word</span></li> [2]
  <li class="word"><span>1: Word</span></li> [3]
  ...
  <li class="word"><span>1: Word</span></li> [10]
</ul>

<ul class="word_list">
  <li class="word"><span>1: Word</span></li> [1]
  <li class="word"><span>1: Word</span></li> [2]
  <li class="word"><span>1: Word</span></li> [3]
</ul>

我不知道最好的方法在哪里 [在控制器中或者只是在 jQuery 中] 以及如何做到这一点？我真的很感激一些帮助！

Answer 1

试试这个：

function showDividedAccountWords(words) {
    var wordListTemplate = 
    "{{#words}}" +
      "<ul class='word_list'>" +
        "<li class='word'>" +
            "<strong>{{wordId}}: </strong>" +
            "<span>{{word}}</span>" +
        "</li>" +
      "</ul>" +
    "{{/words}}";

    // Take 10 words at a time, until there are no words.
    for(var w = words.splice(0, 10); w.length > 0; w = words.splice(0, 10)) {
        var accountWordsHTML = Mustache.to_html(wordListTemplate, {words: w});
        $("#words").append(accountWordsHTML);
    }