在Spring/jQuery中更改JSON

我正在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对象[新单词对象]发送到Spring控制器，后者会得到当前用户单词列表。当前单词列表以JSON对象的形式返回（我在上面粘贴了它），接下来它将用于我的splash.js模板中。

一般来说，当我添加一个新词时，我想让thorough 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>

我不知道在哪里（在Controller中，或者只是在jQuery中）做这件事的最佳方式，以及如何做？我真的很感激你的帮助！