Question

我在productcatalogue.jsp中为每个产品提供了addtocart选项。我想将产品添加到购物车并在同一页面中显示购物车。这就是我所做的。

JSP +脚本

<td><a id="cart" href="addtocart${product.id}">Add To Cart</a> </td>

$('#cart').click(function() { 
            $.ajax({    
                url : '/addtocart{id}',
                type : 'GET',
                data : "",              
                success : function(response) {
                $('#Content').html(response);
              }
          }); 
    }); 

<div id="Content" style="display:none">
           <h2>Cart Content(s):</h2>

        </div>

我已将购物车内容添加到同一个jsp中的div中。

控制器

@Controller
@SessionAttributes("cart")
public class CartController {
    @ModelAttribute("cart")
    public Cart initCart() {
        return new Cart();
    }
    @RequestMapping("addtocart{id}")

    @ResponseBody
    public String addToCart(@PathVariable("id") int id,
                    @ModelAttribute("cart") Cart cart,Model model)
    {
        Product product = productService.getProductById(id);
            if (product != null) {
            CartLine line = new CartLine();
            line.setProduct(product);
            line.setQuantity(1);

            if (product.getQuantity() > 0) {
                cart.add(line);
            }
            }
            if(product.getQuantity() - 1 >= 0) {
                product.setQuantity(product.getQuantity() - 1);
                    }
            else {
                model.addAttribute("message", "Out of Stock!");
                return "error";
                }
                productService.updateProduct(product);

        return "productcatalogue";
    }

它只返回“productcatalogue”。如果我删除@responsebody我没有得到任何响应所需的div。 Firebug只显示响应列中的jsp代码。有人可以告诉我该怎么做。

Answer 1

不要尝试混合两种附加处理程序的方法。在单击处理程序中执行这两个操作，在javascript中定义和附加。

在HTML中，您需要做的就是将每个＆＃34;添加到购物车＆＃34;链接与产品ID。 data-属性是理想的。

<td><a class="addTocart" href="#" data-productid="{product.id}">Add To Cart</a> </td>

请注意，id属性已替换为class="addTocart"，允许以下代码处理所有此类链接 - 您可以在页面上拥有任意数量的链接。

$('.addTocart').on('click', function(event) {
    event.preventDefault();
    $.ajax({
        url: '/addtocart/' + $(this).data('productid'),
        type: 'GET'
        dataType: 'json'
    }).then(updateCart);
});

您可能希望发送quantity以及productID，从而允许在每次点击时添加（或减去）一个或多个项目

updateCart将是一个接受json解码服务器响应的函数，并相应地更新购物车的客户端表示。

通过在某个外部作用域中定义updateCart，可以从其他地方（其他事件处理程序）调用它。

在同一个jsp上返回ajax响应

1 个答案: