Question

我有一个带有产品的jsp页面和针对它的addtocart链接。我试图在同一页面的div中显示购物车。我想发送html作为回复。这就是我所做的。它只返回字符串<div>output</div>。有人可以告诉我应该怎么做。

控制器

    @RequestMapping(value="/addtocart{id}",  produces = "text/plain;charset=UTF-8")
    @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);
            productService.updateProduct(product);
        }
        return "<div>output</div>"; 
    }

JSP

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

$('#demo4').click(function() { 

                $.ajax({    
                url : '/addtocart{id}',
                dataType: 'json',
                contentType: "text/html",
                type : 'GET',
                data :{id:id},
                success : function(response) {
                    $('#output').html(response);
                   }
                 }); 
        }); 

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

Answer 1

我也赞成使用视图的方法，甚至在ajax调用上分离页面。然而，您可以提出的问题是，只需将produces = "text/plain;charset=UTF-8"更改为生成

即可

produces = "text/html;charset=UTF-8"

还有很多其他方面看似错误，与Spring MVC无关，所以即使修正了产品，你仍然需要做一些修正才能得到你期待的东西。

我认为你根本没有发送ajax电话。您最有可能进行完整的浏览器重定向。第一次阅读时，我很困惑＆＃34; text / plain＆＃34; vs＆＃34; text / html＆＃34;在ajax响应中有所作为，但现在我相信你实际上是通过浏览器重定向。将此<a id="demo4" href="addtocart${product.id}">Add To Cart</a>更改为此类<a id="demo4" href="#">Add To Cart</a>，并将return false添加到您的函数末尾。这将执行该功能， return 将确保不遵循该链接
当你这样做时，你也会注意到ajax调用的一些问题;首先，url : '/addtocart{id}'应为url : '/addtocart${product.id}
在完成功能中捕获您的响应不成功，并将输出作为response.responseText，响应将返回正常，但浏览器将尝试将其解析为json并失败。
您的div将保持不可见，您应该添加一些j来切换
One Spring MVC问题，您的Cart bean似乎也有一个名为id的属性。因此，您的id路径变量应重命名，否则将被忽略

如果不是完整的话，那将是比工作更接近的事情

<a id="demo4" href="#">Add To Cart</a>

<div id="output"></div>
<script>

    $('#demo4').click(function() {

        $.ajax({
            url : '/addtocart${product.id}',
            dataType: 'json',
            contentType: "text/html",
            type : 'GET',
            data :{id:4},
            complete: function(response) {
                $('#output').html(response.responseText);
            }
        });
        return false;
    });
</script>

重命名PathVariable

@RequestMapping(value="/addtocart{productId}",  produces = "text/plain;charset=UTF-8")
public String addToCart(@PathVariable("productId") int productId, @ModelAttribute("cart") Cart cart,Model model)

Answer 2

您可以使用AJAX进行操作，并且仍然会为您的卡片返回一个单独的页面，正如Slava建议的那样。

JSP页面cart.jsp：

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- custom html for your cart representation, just an example -->
<div>
  <h1>${cart.headline}</h1>
  <p>${cart.otherProperty}</p>
</div>

控制器：

@RequestMapping(value="/addtocart{id}")
public String addToCart(@PathVariable("id") int id, @ModelAttribute("cart") Cart cart, Model model) {
    doSomethingWithCart(cart);

    model.addAttribute("cart", cart); // add cart to model after doing some custom operations
    return "cart"; // resolved to cart.jsp by your view resolver
}

这样你就可以使用AJAX，但是你仍在返回动态的html内容（调整到一个特定的购物车。）

Spring控制器 - 发送html作为响应

2 个答案: