更新腳本適用於除邊緣以外的所有瀏覽器

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(){ 

    } 
}); 

或只是附加查詢字符串值的網址，你正在請求：

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

}); 

使用開發人員工具（F12） 如果問題仍然存在，請考慮使用開發工具（F12）您的瀏覽器內，並監視網絡標籤，看看正在作出的實際要求，如果他們要麼失敗或者只是從緩存中返回。