javascript - How to place Spring MVC's JSON response into the table in jsp?

Question

This is how my AJAX script looks like:

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

It gets an itemId from the JSP, calls the controller method below with this itemId. This is the controller method:

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

The question is, I would like to place the response (Shopping Cart Object) into this table, which is on the same jsp. But How?:

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

If i could add the response into the request attributes, the table will be fulfilled. But how can i place this object into the request? or into the table actually?

I think the problem is here, in the success function:

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

Here i get the shoppingCartId DOM object (which is the division where the table is), and set the response object (which is the shoppingCart) as Text. I can even set the attributes of shoppingCart object like this:

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

And totalPrice of the object will be displayed on the jsp where the table is seen. But how to place this response object directly to the table? As i have already said, if i could add the response into the request attributes like any other java object, the table will be fulfilled. But how can i place this JSON object into the request? or into the table actually?

Answer 1

If you are asking how to render the ShoppingCart using jsp, then you need to remove your @ResponseBody annotation and instead return a value that indicates the view you would like to use to do the rendering, such as a String with the view name.

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

In this example, "yourViewName" represents the jsp where you are rendering your table.

EDIT AFTER COMMENTS

If you have some other need for the JavaScript object as the response in your success() method, then you will need to redraw the table from scratch on the client-side. However, if you do this, you are duplicating your view-rendering efforts: on the first visit, the view is rendered using jsp, but on subsequent ajax calls, it is redrawn using jquery, and any changes to your view would have to be modified in both places. Still, if you want to go this route, you will have to step through each of the necessary properties in your response object and create the corresponding HTML tags required to rebuild that table. As you noticed, simply trying $('#shoppingCartId').text(response); just replaces your table with some nonsense; this is because response has no concept of HTML built-in...it's just data.

To avoid the view-rendering duplication, I would recommend you try a different approach. The <table>...</table> section should be moved to its own jsp, and your ajax call should treat the response as text instead of json. When you do this, your response object will be the rendered table html, and THEN you can simply do $('#shoppingCartId').html(response); to swap out the old table for the new. For the first visit, simply include your table's jsp within the <div class="span2" id="shoppingCartId">...</div> in order to reuse it. In the end your view will always be rendered using the same method, so your code will be much cleaner.