Question

我有一个页面有几种不同的形式，人们可以在其中插入他们的邮政编码和房屋号码。在这些输入字段上onblur后，我根据邮政编码和房屋号码进行ajax调用，从服务器获取街道名称和城市。

function getAddress(postcode, streetnum, form, tr) {
    $.ajax({
        type: "GET",
        url: "some url with streetnumber and zipcode",
        dataType: "json",
        success: function(data){
            var street = $("input.formstreet", tr);
            var city = $("input.formcity", tr);
            street.val(data.data[0].streetname);
            city.val(data.data[0].city);
            tr.css("visibility","visible");
            switch(tr.get(0).nodeName.toLowerCase()){
                case "tr":
                    tr.css('display','table-row');
                    break;
                case "tbody":
                    tr.css('display','table-row-group');
                    break;
                default:
                    tr.css('display','block');
            };
        }
    });
}

这样可以正常工作，但是如果页面被重新加载并且字段已填满，则需要从服务器重新加载地址。

$("#thing").keyup(function(){
    completeAddress1();
});
completeAddress1();

$("#something").keyup(function(){
    completeAddress2();
});
completeAddress2();

$("#something else").keyup(function(){
    completeAddress3();
});
completeAddress3();

$("#some other thing").keyup(function(){
    completeAddress4();
});
completeAddress4();

completeAddress()函数只是检查是否需要ajax调用，如果是，则调用getAddress。

所以......对于实际问题...... 在页面加载时会进行几次ajax调用，并且只有最后一个调用返回（我用fiddler检查），现在我明白为什么只有一个返回但是我该怎么办呢...

Answer 1

通过检查是否已经运行xhr来修复它，如果是，则将回调函数附加到数组。当第一个xhr完成时，它检查数组以查看是否有任何函数并尝试执行第一个函数，每个函数递归执行此操作直到数组为空。

基本上是这样的：

var arr = [],
    xhr;

function applyXhr(func){
    if(xhr){
        func()
    }else{
        arr.push(func);
    }
}

applyXhr(function(){
    xhr = $.ajax({
        //stuff,
        complete:function(){
            //other stuff

            if(arr.lenght){
                arr.shift()();
            }
        }
    });
})

Answer 2

Turn Off Form Autocompletion

<form name="form1" id="form1" method="post" autocomplete="off"
  action="http://www.example.com/form.cgi">
[...]
</form>

多个ajax调用同时覆盖彼此

2 个答案: