动态JSP页面点击按钮发送对应商品数据的Ajax POST请求解决方案咨询

你的问题核心在于全局选择器会获取所有同class元素的值，而不是当前点击按钮对应商品行的数据。因为页面是动态生成的，你已经用了事件委托（$(document).on('click', ".btn", ...)），这部分是对的，但数据获取的逻辑需要调整，要基于点击的按钮定位到它所在的商品行，再提取该行内的信息。

问题分析 #

你当前的代码中，$('.name').text()会选中页面上所有class为name的元素，取它们的文本内容，这显然不是你要的单个商品的数据。而且，隐藏输入框的内容应该用.val()来获取，而不是.text()，因为input元素的值存在value属性里。

修改后的jQuery代码 #

把你的script部分替换成下面的代码：

$(document).on('click', ".btn", function(){
    // 找到当前按钮所在的<tr>行
    const $row = $(this).closest('tr');
    
    // 在当前行内获取对应元素的值
    const 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,
        // 可以加上成功/失败回调，方便调试
        success: function(response) {
            console.log("数据发送成功", response);
        },
        error: function(xhr, status, error) {
            console.error("发送失败", error);
        }
    });
});

关键说明 #

• $(this).closest('tr')：通过点击的按钮（this）向上查找最近的<tr>元素，也就是当前商品所在的行，这样就把范围限定在了当前商品行内，不会获取到其他行的数据。
• $row.find('.name').val()：在当前行内查找class为name的隐藏输入框，用.val()获取它的value属性值，这才是正确的取值方式。
• 添加回调函数：加上success和error回调可以帮助你调试，看看请求是否成功发送，后端有没有正确响应。

额外注意事项 #

• 确保你的CartEntryData类的字段名（name、price、quantity）和前端发送的JSON键名完全一致，并且类中有对应的getter和setter方法，Spring才能正确解析请求体。
• 数量输入框的quantity建议加上min="1"属性，避免用户输入0或负数：<input type="number" class="quantity" min="1"/>

这样修改后，点击每个商品的"ADD TO CART"按钮时，就只会获取当前商品行的数据并发送到后端了。

内容的提问来源于stack exchange，提问作者1up