多个 Ajax 在一个页面上添加到购物车表单答案

【问题标题】：Several Ajax add to cart forms on one page多个 Ajax 在一个页面上添加到购物车表单
【发布时间】：2012-07-06 09:46:07
【问题描述】：

我在一个网站上有一个页面，同一页面上有多个产品。

我正在尝试让 Ajax 添加到购物车以适用于每个产品（每个产品都有自己的表单），但如果不为每个产品编写 Jquery 函数，我无法弄清楚如何区分一种产品和另一种产品。

下面的脚本适用于页面上的一个产品，因为表单有自己的 ID，但是当一个页面上有 20 个产品时，这不起作用。

function update_cart(data, statusText, xhr, $form)
{
    if (data.success)
    {
        $("input[name=XID]").val(data.XID);
        $('.cart_total').html(data.cart_total); 
    }
    return true; 
}
var cart_form_options = {
    success: update_cart,
    dataType: 'json'
}
jQuery(document).ready(function($){
    $("#add_to_cart_submit").click(function(){

        $("#add_to_cart_form").ajaxForm(cart_form_options);
        $("#add_to_cart_form").submit(); 
    })
});

非常感谢！！

【问题讨论】：

你也可以添加你的html吗？然后我可以更新我的答案以包含一个示例

标签： javascript jquery ajax ajaxform

【解决方案1】：

为每个产品“添加到购物车”按钮/表单赋予一个独特的属性，例如产品 ID。然后，当单击“添加到购物车”按钮时，您可以获取该属性以找出要添加的确切产品。

<form id="add_to_cart_form" productID="product1">

然后在js中：

var product = $("add_to_cart_form").attr("productID");

【讨论】：

感谢您的评论。我不确定如何将它与每个添加到购物车按钮链接起来。基本上我希望它说“提交链接到单击的添加到购物车按钮的表单”。我不擅长 Javascript（学得很快）！
将您正在使用的html添加到您的问题中，我会尽力提供更多帮助

【解决方案2】：

啊...我想我已经整理好了。稍微玩一下就可以了。

结果代码：

<script type="text/javascript">
                var $j = jQuery.noConflict();
                $j(document).ready(function () {
                $j('.add_to_cart_form').submit(function() {
                    $j('.add_submit', this).val('Processing...');
                    var url = $j(this).attr('action');
                    var data = $j(this).serialize();
                    $j.post(url, data, function() {$j('.cart-wrap').load('{site_url}cart');
                        $j('.mini-cart').load('{site_url}cart');
                        $j('.add_submit').val('add to cart');
                        $j('.cart-thankyou').slideDown( 500, function() {});
                        $j('.cart-thankyou').delay(1500).slideUp(400);
                    });
                    return false;
                });
            });
            </script>

【讨论】：