Question

我正在尝试使用jQuery和AJAX将产品添加到购物车中。情况是我得到了超过30个使用foreach循环动态生成的表单。页面加载后，我得到产品列表，但只需要在购物车中添加一个产品，并且不想重新加载页面，所以我使用的是AJAX。请帮助我如何实现这一目标。

最重要的是当我尝试没有<form>标记时，productId的值总是为1，因为它是id属性的第一个值，并将产品保存到id为1的购物车中。所以我使用的是<form>。

这是代码（示例代码）：

<form id="addToCartForm" action="" method="post">

    <input type="hidden" id="productId" value="${products.productid}">
    <button id="btnSubmit">Add to Cart</button>
</form>

<form id="addToCartForm" action="" method="post">

    <input type="hidden" id="productId" value="${products.productid}">
    <button id="btnSubmit">Add to Cart</button>

</form>

<form id="addToCartForm" action="" method="post">

    <input type="hidden" id="productId" value="${products.productid}">
    <button id="btnSubmit">Add to Cart</button>

</form>

我已经尝试了很多东西，比如jquery.form.min.js，但没有任何事情发生，因为我想要的就是我想要的。

请帮忙。 thnx提前。

被修改

的script.js：

$(document).ready(function(){
     $(".addToCart").click(function(){

     $.post('addToCart.htm', {productId: $('input[type=hidden]#productIdId').val()},
         function(message){
         $("#message").html(message); 
         }
     );
    });
 });

Answer 1

你可以这样做：

$("#addToCartForm").on("submit", function(e) {
    var $form = $(this);
    e.preventDefault();
    e.stopPropagation();
    $.ajax({
        method: "POST",
        action: $form.attr("action"),
        data: $form.serialize()
    }).done(function() {
        ...
    });
});

更新：哦！是的，表格的ID应该是唯一的。

更新2：没有表格

<a class="addToCart" href="#" data-productid="${products.productid}">Add to Cart</a>

JavaScript的：

$(".addToCart").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    $.ajaxPost({
        action: "addToCart.html",
        data: {productId: $(this).data("productid")}
    }).done(function() {
        ...
    });
});

Answer 2

您正在寻找类似的内容：

$(document).on('click', '#btnSubmit', function(){
    var value = $(this).prev().val();
    $.ajax({
        url: 'path/to/server/script',
        type: 'post',
        data: { productid: value },
        success: function(){
            alert('succeeded');
        }
    });
});

无论如何，如果你有相同类型的元素，你必须使用类而不是id。 id是标识符，因此它必须是唯一的。

如何在不刷新页面的情况下提交表单

2 个答案: