Question

我制作了一个脚本，只需一个按钮即可将多个表单提交到购物车。提交完成后，将触发新功能updateCartAjax()以更新购物车内容，而无需实际进入购物车页面。

此脚本适用于除Edge之外的所有浏览器。不知何故，看起来将表单添加到购物车功能正确但更新购物车不是。

当我清除我的cookie时，它第一次正常运行。将其他内容添加到购物车时，不会触发函数updateCartAjax()。然而按F5工作。

我的脚本中是否有任何遗漏，可能导致updateCartAjax()无法正常工作？在任何浏览器中我都没有在控制台中出现任何错误!!

我的剧本

// forms look like
<div class="temp-cart">
    <form id="form_19093981" method="post" action="/cart/add/19093981/"></form>
    <form id="form_19093982" method="post" action="/cart/add/19093982/"></form>
    <form id="form_19093983" method="post" action="/cart/add/19093983/"></form>
    <form id="form_19093984" method="post" action="/cart/add/19093984/"></form>
    <button type="submit" class="btn btn-custom-2 addToCart">Submit!</button>
</div>


function updateCartAjax() {
    $.get("/cart/?format=json", function(e) {
        var a = getAjaxTranslation,
            t = [],
            i = e.shop.currency2;
        if (e.page.cart) {
            e.page.cart.products.forEach(function(e) {
                t.push('<li class="item clearfix">  <a href="cart/delete/' + e.qid + '" title="' + a("Delete") + '" class="delete-item" data-qid="' + e.qid + '"><i class="fa fa-times"></i></a>  <figure>    <a href="' + e.url + '" title="' + e.fulltitle + '">      <img src="' + imageIdToUrl(e.image, "60x60x2") + '" width="60" height="60" alt="' + e.fulltitle + '" title="' + e.fulltitle + '" />    </a>  </figure>  <div class="dropdown-cart-details">    <p class="item-name">      <a href="' + e.url + '" title="' + e.fulltitle + '">       ' + (e.brand.title ? "<span>" + e.brand.title + "</span>" : "") + "       " + e.title + '        <span class="variant">' + e.variant + "</span>      </a>    </p>    <p>      " + e.quantity + 'x      <span class="item-price">' + i.symbol + e.price.price + "</span>    </p>  </div></li>")
            });
            var s = '<div class="dropdown-cart-menu-container">  <div class="btn-group dropdown-cart">    <div class="dropdown-toggle" data-toggle="dropdown">      <div class="minicart"></div>      <div class="info">        <span class="cartitems"><b>' + e.page.cart.products.length + "</b> " + a("Items") + '</span>        <span class="cartprice">' + i.symbol + e.page.cart.total.price.toFixed(2).replace(/\./g, ',') + '</span>      </div>    </div>    <div class="dropdown-menu dropdown-cart-menu pull-right clearfix" role="menu">      <ul class="dropdown-cart-product-list">' + t.join("") + '</ul>      <ul class="dropdown-cart-total">        <li><span class="dropdown-cart-total-title">        ' + a(e.shop.b2b ? "Total excl. VAT" : "Total") + "</span>" + i.symbol + e.page.cart.total.price.toFixed(2) + '</li>      </ul>       <div class="dropdown-cart-action">          <span><a href="/cart" title="' + a("My shopping cart") + '">' + a("Edit") + '</a></span>          <span><a href="' + a("Checkout") + '" class="btn btn-custom" title="' + a("Checkout") + '">' + a("Checkout") + "</a></span>        </div>    </div>  </div></div>"
        }
        $("#cart").html(s)
    })
}



  var state = false;

  $(document).ready(function() {
    $('.temp-cart .addToCart').click(function() {
      go();

      // get all forms on the page
      $forms = $('.temp-cart form');
      sent = 0;

      // post the form (non-async)
      $forms.each(function() {
        if(state) {
          var qty = $(this).find('.amt').text();
          var qty2 = parseInt(qty);
          var url = $(this).attr('action')+'?quantity='+qty2+'/';
          $.ajax({
            type: "post",
            async: false,
            url: url,
            data: $(this).serialize(),
            success: function(data) {
              if(++sent == $forms.length) {
                console.log('All forms are submitted!');

               // updateStuff();
                updateCartAjax();

              }
            }
          });
        } else { return false; }
      });
      stop();
    });

    function go() {
      if(!state) {
        state = true;
        $('.temp-cart .addToCart').button('loading');
        $('input[type=button], input[type=submit]').attr("disabled", "disabled");
      }}

    function stop() {
      if(state) {
        state = false;
        $('.temp-cart .addToCart').button('reset');
        $('input[type=button], input[type=submit]').removeAttr("disabled");
      }}
  });

Answer 1

听起来像缓存

这听起来像是一个可能容易被频繁缓存的场景。根据我的经验，Internet Explorer和Edge在AJAX缓存方面非常积极，禁用它可能有助于您解决此问题。

您可以通过文档就绪函数中的以下代码片段明确关闭AJAX缓存：

$(document).ready(function() {
     // Disable AJAX-based caching
     $.ajaxSetup({ cache: false });

     // Other code omitted for brevity
});

这显然是一个更全局的解决方案，但您可以在个别AJAX请求期间设置cache属性，如您所料：

$.ajax({
    method: 'GET',
    url: '...',
    cache: false,
    success: function(){

    }
});

或者只是将querystring值附加到您请求的URL：

// Using a timestamp will ensure the request isn't cached
$.get("/cart/?format=json&dt=" + (new Date()).getTime(), function(e) {

});

使用开发者工具（F12） 如果问题仍然存在，请考虑在浏览器中使用开发人员工具（F12）并监视“网络”选项卡，以查看是否正在发出实际请求，以及它们是否失败或只是从缓存中返回。

更新脚本适用于除Edge之外的所有浏览器

1 个答案: