Javascript 如何放置Spring MVC';将JSON响应放入jsp中的表中?

Javascript 如何放置Spring MVC';将JSON响应放入jsp中的表中?,javascript,jquery,json,spring,jsp,Javascript,Jquery,Json,Spring,Jsp,以下是我的AJAX脚本的外观: <script> function addToCart(itemId) { var url = "./addToCart/" + itemId; $.get(url, function(response){ $('#shoppingCartId').text(response); }); } </script> 问题是,我想将响应(购物车对象)放在这个表中,它位于同一个jsp上。但是怎么做呢 <

以下是我的AJAX脚本的外观:

<script>
function addToCart(itemId) {
    var url = "./addToCart/" + itemId;
    $.get(url, function(response){
        $('#shoppingCartId').text(response);
    });
}
</script>
问题是,我想将响应(购物车对象)放在这个表中,它位于同一个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>
这里,我获取shoppingcartiddom对象(表所在的分区),并将响应对象(shoppingCart)设置为文本。我甚至可以像这样设置shoppingCart对象的属性:

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

对象的总价将显示在jsp上,在jsp上可以看到该表。但是如何将这个响应对象直接放到表中呢?正如我已经说过的,如果我可以像任何其他java对象一样将响应添加到请求属性中,那么该表将得到满足。但是如何将这个JSON对象放入请求中呢?如果您询问如何使用jsp呈现
ShoppingCart
,那么您需要删除
@ResponseBody
注释,并返回一个值,该值指示您要用于呈现的视图,例如带有视图名称的
字符串

@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()。但是,如果您这样做,您将重复您的视图呈现工作:在第一次访问时,视图是使用jsp呈现的,但是在随后的ajax调用中,它是使用jquery重新绘制的,对视图的任何更改都必须在这两个位置进行修改。尽管如此,如果您想走这条路,您必须在
response
对象中遍历每个必要的属性,并创建重建该表所需的相应HTML标记。正如您所注意到的,只需尝试
$('#shoppingCartId').text(响应)只是用一些废话替换你的表格;这是因为
response
没有内置HTML的概念……它只是数据


为了避免视图渲染重复,我建议您尝试另一种方法。
部分应该移动到它自己的jsp中,ajax调用应该将响应视为文本而不是json。执行此操作时,
response
对象将是呈现的表html,然后您可以简单地执行
$('#shoppingCartId').html(response)
将旧表替换为新表。对于第一次访问,只需将表的jsp包含在
中即可重用。最后,您的视图将始终使用相同的方法呈现,因此您的代码将更加清晰。

不,我希望保持在相同的jsp上。我只想更新它的一部分,在那里可以看到表。这就是为什么我只想将一个JSON对象返回到同一个视图。希望能有帮助。我当然不想重画桌子。所以我尝试了你的第二个建议。如果我理解正确,我现在有了这个设置:我没有更改我的控制器方法。我没有改变我的剧本。(你可以在上面看到)。我将表移动到一个单独的jsp。我家的jsp(也包含ajax调用)如下所示。它还不起作用。你是说别的吗?但听起来还是不对。。我的shoppingCart.jsp需要一个名为shoppingCart类型shoppingCart的请求参数。但我使用的ajax响应如下:$(“#shoppingCartId”).text(响应)。。那么,如何将此响应转换为ShoppingCart对象呢?我错过了……不,你需要把你的控制器换成和我一样的东西。使用您的,您仍然返回一个转换为JSON的对象,但是您需要返回“myTable”,这样结果就是可以简单地放置到位的纯html。当您真正想要做的只是呈现一个ShoppingCart的html视图时,为什么需要“转换为ShoppingCart对象”的响应?
function(response){
            $('#shoppingCartId').text(response.totalPrice);
        }
@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";
}