在同一頁面中單擊按鈕時使用 ajax 發送多個 Post 請求

Question

嗨，我正在處理 jsp 頁面，該頁面動態呈現多個值並在每個值上顯示一個按鈕，當我單擊每個按鈕時，我應該觸發 ajax 調用，該調用將該值發送到后端。

例如

價值1加

價值2加

當我單擊添加值 1 時，值 1 應該作為發布請求的一部分發送。

我無法為每個元素添加 id，因為此頁面是動態頁面。 我查看了一些堆棧溢出答案，但它們都在其元素中使用 ID。

如果您不知道我在說什么，請找到圖片請提出建議。

我寫的 jsp。

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<title>Items List</title>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<h1>Welcome to LassiShop </h1>
<c:set var="url" value="/cart"/>
<c:if test="${itemsData.size() gt 0}">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Price</th>
        <th scope="col">Quantity</th>
      </tr>
    </thead>
    <tbody>
      <c:forEach items="${itemsData}" var="item">
      <div class="form">
        <tr>
          <td>
            <c:out value="${item.name}"/>
            <input type="hidden" class="name" value="${item.name}">
          </td>
          <td>
            <c:out value="${item.price}"/>
            <input type="hidden" class="price" value="${item.price}">
           </td>
          <td><input type="number" class="quantity"/></td>
          <td><button class="btn btn-primary" type="submit">ADD TO CART</button></td>
        </tr>
       </div>
      </c:forEach>
    </tbody>
  </table>
</c:if>
<c:if test="${itemsData.size() eq 0}">
    <h3>No Products available for this Category</h3>
</c:if>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script>
$(document).on('click',".btn",function(){
var itemData = {};
    itemData["name"] = $('.name').text();
    itemData["price"] = $('.price').text();
    itemData["quantity"] = $('.quantity').text();
    console.log(itemData);
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "/cart",
        data : JSON.stringify(itemData),
        dataType : 'json',
        async:true
    });
});
</script>
</body>
</html>

controller class

@RequestMapping(value = "/cart", method = RequestMethod.POST, produces = "application/json")
    public @ResponseBody String testCart(@RequestBody CartEntryData cartEntry){
        System.out.println(cartEntry.getName());
        System.out.println(cartEntry.getPrice());
        System.out.println(cartEntry.getQuantity());
        return "itemsList";
    }

請參考上圖了解我的產品是如何展示的。

請注意，我不能使用 ID，因為這是動態的，我需要以某種方式從前端獲取數據並將其發送到 controller class。

上面的 jquery 不起作用，因為語法錯誤或錯誤。

Answer 1

幾個問題：

<div>是<tbody>的無效子級和<tr>的無效父級。
使用val()而不是text()從<input> 、 <select>等表單控件中獲取值。
您需要發送每個值的特定行實例。 為此，請使用closest()來隔離行並使用find()來獲取行中的特定元素，例如：


$(document).on('click', ".btn", function() {
  // `this` is the button event occured on
  var $row = $(this).closest('tr');
  
  var itemData = {
    name: $row.find('.name').val(),
    price: $row.find('.price').val(),
    quantity: $row.find('.quantity').val()

  };
  console.log(itemData)
  $.ajax({
    type: "POST",
    contentType: "application/json",
    url: "/cart",
    data: JSON.stringify(itemData),
    dataType: 'json',
    //async: true  pointless as this is default
  });
});

在同一頁面中單擊按鈕時使用 ajax 發送多個 Post 請求

問題描述

1 個解決方案

解決方案1
0 已采納 2021-01-09 12:00:28

在同一頁面中單擊按鈕時使用 ajax 發送多個 Post 請求

問題描述

1 個解決方案

解決方案1 0 已采納 2021-01-09 12:00:28

解決方案1
0 已采納 2021-01-09 12:00:28