Ajax 随机更改 URL 查询参数答案

【问题标题】：Ajax random changes URL query parameterAjax 随机更改 URL 查询参数
【发布时间】：2017-11-17 21:49:10
【问题描述】：

我使用 AJAX 只是为了防止重定向到购物车。

因此，我在购物车中有随机数量的商品。

链接本身粘贴到地址栏效果很好，并给出了指定的数量。但是当我使用 AJAX 时，它会给出错误的数量。

这段代码有什么问题，或者我该如何以其他方式指定数量？

    <script type="text/javascript">
        $(document).on('click', '#url_cart', function(event) {
           event.preventDefault(); //prevent redirect
          $.ajax($(this).attr('href')).done(function(response) { 
               });
         });
        </script>
        <!-- link for the item -->
<a 
    id="url_cart" 
    href="http://localhost:4000/cart.php?action=add&product_id={{id}}&variation_id=currency_id=&qty[]=1">
    {{lang 'products.add_to_cart'}}
</a>

【问题讨论】：

您是否尝试过控制台记录$(this).attr('href') 以查看它是什么以及它的数量是否正确？
@Taplar 刚试过！有趣的是，我总是得到 12 个控制台日志！购物车中的数量仍然不同，例如 3、5 等。重要的是，我的页面上有 12 个具有相同 ID 的链接。所以看起来 AJAX 会为每个链接自己执行？！链接中的数量始终正确。
听起来你在一个元素上绑定了多次
@Taplar 我该如何预防？
我的意思是，你不应该这样。你真的不应该有 12 个元素匹配那个事件，因为你正在做一个委托绑定，你的子选择器是一个 id，你不能重复 id。

标签： jquery ajax url-redirection

【解决方案1】：

这是 Bigcommerce Stencil。在我的例子中，主页为每个项目呈现 1 个 card.html。如此重复12次。我的 AJAX 在这个 card.html 中。 @Taplar 说的对，我是

在一个元素上多次绑定

所以我为每个链接提供了唯一 ID（在本例中为 {{id}} == 项目 ID）：

    <script type="text/javascript">
    $(document).on('click', '#{{id}}', function(event) {
       event.preventDefault();
      $.ajax($(this).attr('href')).done(function(response) { 
           });
     });
    </script>

     <a id="{{id}}" 
href="http://localhost:4000/cart.php?action=add&product_id={{id}}&variation_id=currency_id=&qty[]=1">
   {{lang 'products.add_to_cart'}}
      </a>

现在完美运行！谢谢塔普拉！

【讨论】：