当我尝试在 jquery 中使用 html 将产品数量添加到购物车时出现 1 个错误，但即使捕获了点击事件也无法添加。点击事件完成后，获取 ID 为“购物车编号”的 APIController 中的值，它不能被调用。这是我的 js 代码：
$(document).ready(function(){
$(".cart-btn").click(function(){
var color_id = $(this).closest("tr").find(".color").attr("data-color");
var color_name = $(this).closest("tr").find(".color").text();
var quantity = $(this).closest("tr").find(".quantity").text();
var product_name = $("#detail-title").text();
var product_id = $("#detail-title").attr("data-Id");
var price = $("#detail-price").attr("data-value");
$.ajax({
url:"/PhoneAccessories/api/addtocart",
type:"GET",
data:{
product_id:product_id,
color_id:color_id,
quantity:quantity,
product_name:product_name,
price:price,
color_name:color_name
},
success: function(value){
$("#cart-number").html("<span>"+value+"</span>");
}
})
});
});
这是我的 APIController：
@Controller
@RequestMapping("api/")
@SessionAttributes({"email","cart"})
public class APIController {
@Autowired
EmployeeService employeeService;
@GetMapping("addtocart")
public String AddToCart(@RequestParam int product_id,@RequestParam int color_id,@RequestParam int quantity,@RequestParam String product_name,@RequestParam String price,@RequestParam String color_name,HttpSession httpSession) {
if(httpSession.getAttribute("cart") == null) {
List<ProductCart> productCarts = new ArrayList<ProductCart>();
ProductCart carts = new ProductCart();
carts.setProduct_id(product_id);
carts.setColor_id(color_id);
carts.setQuantity(1);
carts.setProduct_name(product_name);
carts.setPrice(price);
carts.setColor_name(color_name);
productCarts.add(carts);
httpSession.setAttribute("cart", productCarts);
List<ProductCart> listCart = (List<ProductCart>) httpSession.getAttribute("cart");
return listCart.size()+ "";
}else {
List<ProductCart> listCart = (List<ProductCart>) httpSession.getAttribute("cart");
int location = CheckProductAlreadyExists(product_id, color_id, httpSession);
if(location == -1) {
ProductCart carts = new ProductCart();
carts.setProduct_id(product_id);
carts.setColor_id(color_id);
carts.setQuantity(1);
carts.setProduct_name(product_name);
carts.setPrice(price);
carts.setColor_name(color_name);
listCart.add(carts);
}else {
int newQuantity = listCart.get(location).getQuantity()+1;
listCart.get(location).setQuantity(newQuantity);
}
return listCart.size() +"";
}
}
private int CheckProductAlreadyExists(int product_id,int color_id,HttpSession httpSession) {
List<ProductCart> listCart = (List<ProductCart>) httpSession.getAttribute("cart");
for(int i=0;i<listCart.size();i++) {
if(listCart.get(i).getProduct_id()== product_id && listCart.get(i).getColor_id() ==color_id ) {
return i;
}
}
return -1;
}
这里是jsp详情页面：
<body>
<section id="detail-page">
<nav>
<div id="check" class="logo">
<img id="image-logo" src='<c:url value="/resources/Image/YOP.png"/>' />
</div>
<ul>
<li><a href="/PhoneAccessories/">Home</a></li>
<li><a href="#Products">Products</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Review">Review</a></li>
<li><a href="#Servises">Servises</a></li>
</ul>
<div class="icons">
<i class="fa-solid fa-cart-shopping"><div id="cart-number"><span>${NumberOfProduct}</span></div></i>
<c:choose>
<c:when test="${fc != null}">
<a id="first-char" href="login/"> ${fc} </i></a>
</c:when>
<c:otherwise>
<a href="/PhoneAccessories/login/"><i class="fa-solid fa-user"></i></a>
</c:otherwise>
</c:choose>
</div>
</nav>
</section>
<!-- Detail Product -->
<div id="container-detail" class="container">
<div class="row">
<div id="product-category" class="col-sm-2 col-md-2">
<div>
<span id="product-category-titile">Product Catalogue</span>
</div>
<ul id="product-category-ul">
<li><a href="#">category</a></li>
<li><a href="#">category</a></li>
<li><a href="#">category</a></li>
<li><a href="#">category</a></li>
<li><a href="#">category</a></li>
<!--
<c:forEach var="category" items="${categories}">
<li><a href="#">${category}</a></li>
</c:forEach>
-->
</ul>
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-sm-5 col-md-5">
<img id="image-detail" src='<c:url value="/resources/Image/products/${product.getProduct_image()}"/>' />
</div>
<div class="col-sm-7 col-md-7">
<h4 id="detail-title" data-Id="${product.getProduct_id()}" >${product.getProduct_name()}</h4>
<h5 id="detail-price" data-value="${product.getProduct_price()}" >${product.getProduct_price()}</h5>
<table class="table">
<thead>
<tr>
<td>Color</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<c:forEach var="detailProduct" items="${product.getProduct_Details()}">
<tr>
<td class="color" data-color="${detailProduct.getProduct_Color().getColor_id()}" >${detailProduct.getProduct_Color().getColor_name()}</td>
<td class="quantity" data-quantity="${detailProduct.getQuantity()}" >${detailProduct.getQuantity()}</td>
<td><button id="product-button" class="cart-btn">shop now</button></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-2 col-md-2">
<h5>Description</h5>
<span>${product.getDescription_product()}</span>
</div>
</div>
</div>
<!--Footer-->
<footer>
<div class="footer_main">
<div class="tag">
<h1>Contact</h1>
<a href="#"><i class="fa-solid fa-house"></i>123/Colombo/Sri
Lanka</a> <a href="#"><i class="fa-solid fa-phone"></i>+94 12 345
6789</a> <a href="#"><i class="fa-solid fa-envelope"></i>[email protected]</a>
</div>
<div class="tag">
<h1>Get Help</h1>
<a href="#" class="center">FAQ</a> <a href="#" class="center">Shipping</a>
<a href="#" class="center">Returns</a> <a href="#" class="center">Payment
Options</a>
</div>
<div class="tag">
<h1>Our Stores</h1>
<a href="#" class="center">Sri Lanka</a> <a href="#" class="center">USA</a>
<a href="#" class="center">India</a> <a href="#" class="center">Japan</a>
</div>
<div class="tag">
<h1>Follw Us</h1>
<div class="social_link">
<a href="#"><i class="fa-brands fa-facebook-f"></i></a> <a href="#"><i
class="fa-brands fa-twitter"></i></a> <a href="#"><i
class="fa-brands fa-instagram"></i></a> <a href="#"><i
class="fa-brands fa-linkedin-in"></i></a>
</div>
</div>
<div class="tag">
<h1>Newsletter</h1>
<div class="search_bar">
<input type="text" placeholder="You email id here">
<button type="submit">Subscribe</button>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<jsp:include page="footer.jsp" />
</body>