Spring控制器 - 發送html作爲響應

Question

我有一個加載的jsp頁面，其中包含產品和addtocart鏈接。我試圖在同一頁面中顯示購物車。我想發送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呼叫。你最有可能做一個完整的瀏覽器重定向。當第一次閱讀時，我很困惑，「text/plain」與「text/html」在ajax響應中有所不同，但現在我相信你實際上是通過瀏覽器重定向的。將此<a id="demo4" href="addtocart${product.id}">Add To Cart</a>更改爲像這樣的<a id="demo4" href="#">Add To Cart</a>，並將return false添加到函數的末尾。這將執行該功能，並且返回將確保不會遵循鏈接

• 當您這樣做時，您會注意到您的ajax調用還有一些問題;首先，url : '/addtocart{id}'應url : '/addtocart${product.id}

• 捕捉在沒有成功，功能齊全的響應，並獲得輸出response.responseText，響應將返回正常，但瀏覽器將嘗試分析它作爲JSON和失敗。

• 你的div將保持無形的，你應該添加一些JS來觸發該

• 一個Spring MVC的疑難雜症，你的車的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做到這一點，仍然會返回一個單獨的頁面，您的卡，作爲光榮建議。

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內容（ 調節到一個特定的購物車）這種方式。