java - 如何将Spring MVC的JSON响应放入jsp中的表中？

Question

这就是我的 AJAX 脚本的样子：

<script>
function addToCart(itemId) {
    var url = "./addToCart/" + itemId;
    $.get(url, function(response){
        $('#shoppingCartId').text(response);
    });
}
</script>

它从 JSP 中获取一个 itemId，并使用这个 itemId 调用下面的控制器方法。这是控制器方法：

@RequestMapping(value="/addToCart/{itemId}", method=RequestMethod.GET)
public @ResponseBody ShoppingCart addToCart(@PathVariable Long itemId, @ModelAttribute ShoppingCart shoppingCart) {

    Item item = itemService.getItemWithId(itemId);
    if(item != null) {
        shoppingCartService.addItem(shoppingCart, item);
    }

    return shoppingCart;
}

问题是，我想将响应（购物车对象）放入此表中，该表位于同一个 jsp 上。但是如何？：

<div class="span2" id="shoppingCartId">
    <table class="table table-condensed">
        <tr>
            <td><b>#</b></td>
            <td><b>NAME</b></td>
            <td><b>PRICE</b></td>
        </tr>
        <c:forEach items="${shoppingCart.items}" var="item" varStatus="count">
            <tr>
                <td>${count}</td>
                <td>${item.name}</td>
                <td>${item.price}</td>
            </tr>
        </c:forEach>
        <tr>
            <td></td>
            <td></td>
            <td><b>Total Price: {shoppingCart.totalPrice}</b></td>
        </tr>
    </table>
</div>

如果我可以将响应添加到请求属性中，则该表将被完成。但是我怎样才能把这个对象放入请求中呢？还是真的进了桌子？

我认为问题出在这里，在成功函数中：

function(response){
            $('#shoppingCartId').text(response);
        }

这里我得到了 shoppingCartId DOM 对象（即表所在的分区），并将响应对象（即 shoppingCart）设置为 Text。我什至可以像这样设置 shoppingCart 对象的属性：

function(response){
            $('#shoppingCartId').text(response.totalPrice);
        }

并且对象的totalPrice会显示在看到表格的jsp上。但是如何将这个响应对象直接放到表中呢？正如我已经说过的，如果我可以像任何其他 java 对象一样将响应添加到请求属性中，那么该表将被完成。但是我怎样才能把这个 JSON 对象放入请求中呢？还是真的进了桌子？

Answer 1

如果您询问如何使用 jsp 渲染 ShoppingCart，那么您需要删除您的 @ResponseBody 注释，而是返回一个值，该值指示您希望用于渲染的视图，例如 @ 987654323@ 与视图名称。

@RequestMapping(value="/addToCart/{itemId}", method=RequestMethod.GET)
public String addToCart(@PathVariable Long itemId, @ModelAttribute ShoppingCart shoppingCart) {

    Item item = itemService.getItemWithId(itemId);
    if(item != null) {
        shoppingCartService.addItem(shoppingCart, item);
    }

    return "yourViewName";
}

在本例中，“yourViewName”表示您在其中呈现表格的 jsp。

评论后编辑

如果您在 success() 方法中需要 JavaScript 对象作为 response，那么您将需要在客户端从头开始重新绘制表格。但是，如果你这样做，你就是在重复你的视图渲染工作：在第一次访问时，视图是使用 jsp 呈现的，但在随后的 ajax 调用中，它会使用 jquery 重新绘制，并且对视图的任何更改都必须是在这两个地方都进行了修改。尽管如此，如果您想走这条路，您将不得不逐步检查response 对象中的每个必要属性，并创建重建该表所需的相应 HTML 标记。正如您所注意到的，简单地尝试$('#shoppingCartId').text(response); 只会用一些废话代替您的桌子；这是因为response 没有内置 HTML 的概念……它只是数据。

为避免视图渲染重复，我建议您尝试不同的方法。 <table>...</table> 部分应该移动到它自己的 jsp 中，并且您的 ajax 调用应该将响应视为文本而不是 json。当您这样做时，您的response 对象将是呈现的表格html，然后您可以简单地执行$('#shoppingCartId').html(response); 将旧表格换成新表格。第一次访问时，只需在<div class="span2" id="shoppingCartId">...</div> 中包含您的表的jsp 以便重用它。最后，您的视图将始终使用相同的方法呈现，因此您的代码会更干净。