防止jQuery post请求多次触发

prevent jQuery post request to fires mulitple times

本文关键字：请求 jQuery post 防止      更新时间：2023-09-26

我有一个网店，用户可以通过一个按钮将产品添加到购物车中，这样他们就可以留在目录页面上（列出所有产品）。我使用jQuery和ajax来实现这一点。奇怪的是，当我按下按钮时，所有的表格都会被提交。这不是我想要的！

$(function() {
    $('form').submit(function (event) {
        event.preventDefault();
        var $form = $(this),
            formdata = $form.serialize(),
            url = $form.attr('action');
        $.post(url, formdata);
    });
});

我知道我不能使用一个类来完成这项工作，因为这将提交所有的产品，但id没有用处，因为我可以在一个页面上有50多个产品，这将是大量重复的工作。

那么，有什么解决方案吗？

提前感谢

您显示的代码应该在隔离状态下运行，因此您的代码要么没有被命中（由于页面上的错误），要么没有连接到每个产品的表单（例如，如果它们也是动态加载的）。

如果表单是动态加载的，正如我所怀疑的那样，那么您需要使用委派的事件处理程序，该处理程序连接到表单的不变祖先（默认为document）

例如：

$(function() {
    $(document).on('submit', 'form', function (event) {
        event.preventDefault();
        var $form = $(this),
            formdata = $form.serialize(),
            url = $form.attr('action');
        $.post(url, formdata);
    });
});

它的工作原理是侦听submit事件向上冒泡到祖先，然后应用jQuery form选择器，然后将函数应用到导致该事件的任何匹配元素，因此将动态处理添加到页面的表单。

如果不是这样，请提供其余代码和页面HTML示例（来自浏览器另存为，而非源代码）

我认为您只需要另一个参数，例如当前产品的ID。所以你可以做一些类似的事情：

$(function() {
    $('.add-cart-form').submit(function (event) {
        event.preventDefault();
        var $form = $(this),
            productId = $(this).attr('data-product-id'), // Assuming you add the ID in your view
            formdata = $form.serialize() + '&productId=' + productID,
            url = $form.attr('action');
        $.post(url, formdata);
    });
});

然后，您必须检索productId参数，该参数将只返回当前产品。

构建产品列表时，可以为每个按钮添加一个属性。像这样的东西应该起作用：

<button data-productid='ABC123' onclick='addToCart(this)'>Add</button>
<script>
    function addToCart(btn) {
        var productId = $(btn).data('productid');
        // do ajax call, using productid
    }
</script>
相关文章：