在iPad上使用JQuery时出现Ajax错误

Question

我们的某个生产网络应用程序存在问题,但仅限于iPad/iOS8.

基本上,在我们的应用程序中,用户通过点击代表不同产品的图像将产品添加到他的购物车中.当图像被轻击时,产品被"选中"并进行ajax异步调用; 此电话更新我们的购物车.每次异步调用持续5-10秒.

当用户按顺序多次点击时,会出现问题(但仅限在iPad上,而不是在Chrome桌面上等).然后,第n个ajax调用失败并显示"错误0".注意:当一个已经执行时,我们无法阻止第二个ajax调用(如某些答案所示),因为购物车不会正确更新.

我在一个jsFiddle示例中跟踪了这个行为,你可以在这里找到:

http://jsfiddle.net/oc1ktv6u/30/

function updateCart()
{
var data = {
        json: $.toJSON({
            text: 'some text',
            array: [1, 2, 'three'],
            object: {
                par1: 'another text',
                par2: [3, 2, 'one'],
                par3: {}
            }
        }),
        delay: Math.round(Math.random()*12)
}

$.ajax({
    url:"/echo/json/",
    data:data,
    type:"POST",
    success:function(response)
    {
       $(".target").append("+");
    },
    error:function(xhr, ajaxOptions, thrownError) 
    {
        alert("There was an error in the ajax call: ["+xhr.status+"] ["+thrownError+"]");
    }
});

}

我的主要问题是:

• 为什么会发生这种情况(以及为什么,显然只在iPad/Safari上)？

Answer 1

1. 当 ajax 处于活动状态时阻止点击
2. 使用 PreventDefault 不点击链接

 Please click <a href="#" id="aia">here</a> many times on iPad/Safari.
  <div class='target'>
      Result:
  </div>

$(function() {
  var active = false;
  $("#aia").on("click",function(e) {
    e.preventDefault();
    if (active) return;
    active=true;
    var data = {
      json: $.toJSON({
        text: 'some text',
        array: [1, 2, 'three'],
        object: {
            par1: 'another text',
            par2: [3, 2, 'one'],
            par3: {}
        }
      }),
      delay: Math.round(Math.random()*12)
   }

   $.ajax({
     url:"/echo/json/",
     data:data,
     type:"POST",
     success:function(response) {
       $(".target").append("+");
       active=false;
     },
     error:function(xhr, ajaxOptions, thrownError) { 
      alert("There was an error in the ajax call: ["+xhr.status+"] ["+thrownError+"]");
     }
   });
});