Как поместить ответ JSON Spring MVC в таблицу в JSP?

0

Вот как выглядит мой сценарий AJAX:

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

Он получает itemId из JSP, вызывает метод контроллера ниже с этим 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) как текст. Я даже могу установить атрибуты объекта shoppingCart следующим образом:

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

И totalPrice объекта будет отображаться на jsp, где отображается таблица. Но как разместить этот объект ответа непосредственно в таблице? Как я уже сказал, если бы я мог добавить ответ в атрибуты запроса, как и любой другой Java-объект, таблица будет выполнена. Но как я могу разместить этот объект JSON в запросе? или в таблицу на самом деле?

Теги:
jsp
spring

1 ответ

1
Лучший ответ

Если вы спросите, как визуализировать ShoppingCart с помощью jsp, вам нужно удалить аннотацию @ResponseBody и вместо этого вернуть значение, которое указывает представление, которое вы хотели бы использовать для рендеринга, например String с именем вида.

@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, где вы показываете свою таблицу.

ИЗМЕНИТЬ ПОСЛЕ КОММЕНТАРИИ

Если у вас есть другая потребность в объекте JavaScript в качестве response в вашем методе success(), вам нужно будет перерисовать таблицу с нуля на стороне клиента. Однако, если вы это сделаете, вы дублируете ваши усилия по рендерингу рендеринга: при первом посещении представление отображается с помощью jsp, но при последующих вызовах ajax оно перерисовывается с использованием jquery, и любые изменения в вашем представлении должны быть изменен в обоих местах. Тем не менее, если вы хотите пройти этот маршрут, вам нужно будет выполнить все необходимые свойства объекта response и создать соответствующие теги HTML, необходимые для перестройки этой таблицы. Как вы заметили, просто попробуйте $('#shoppingCartId').text(response); просто заменяет ваш стол какой-то глупостью; это потому, что response не имеет понятия встроенного HTML... это просто данные.

Чтобы избежать дублирования представления, я бы рекомендовал вам попробовать другой подход. Раздел <table>...</table> должен быть перемещен в собственный jsp, и ваш вызов ajax должен обрабатывать ответ как текст вместо json. Когда вы это сделаете, ваш объект response будет отображаемой таблицей html, а THEN вы можете просто сделать $('#shoppingCartId').html(response); поменять старый стол на новый. Для первого посещения просто <div class="span2" id="shoppingCartId">...</div> таблицу jsp в <div class="span2" id="shoppingCartId">...</div>, чтобы повторно использовать ее. В конечном итоге ваше представление всегда будет отображаться с использованием того же метода, поэтому ваш код будет намного чище.

  • 0
    Нет, я хочу остаться на том же JSP. Я просто хочу обновить его часть, где видна таблица. Вот почему я просто хочу вернуть объект JSON в то же представление.
  • 0
    Отредактировал мой ответ. Надеюсь, это поможет.
Показать ещё 13 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню