做了一个自动补全功能,用到多个ajax,一直有问题
select: function( event, ui ) {
var message =ui.item.parentid;
$.ajax({
url: prefix+'/getOneTwo/'+message,
type: 'GET' ,
async: true,
dataType: "json",
success: function (data) {
var opt2="";
var opt3="";
//填充第一大类
$("#category1").find("option[value="+data.parentid+"]").attr("selected",true);
//填充第二类
category1change();
$("#category2").find("option[value="+data.code+"]").attr("selected",true);
// opt2+='<option value='+data.code+'>'+data.name+'</option>';
// $("#category2").empty();
// $("#category2").append(opt2);
//填充第三类
category2change();
$("#category3").find("option[value="+ui.item.value+"]").attr("selected",true);
// opt3+='<option value='+ui.item.value+'>'+ui.item.label+'</option>';
// $("#category3").empty();
// $("#category3").append(opt3);
//第四第五类设置为空
category3change();
},
error: function () {
alert("时间控制请求失败请联系管理员!")
}
});
$("#tags").val( ui.item.label );
return false;
}
就是在这里
//填充第二类
category1change();
$("#category2").find("option[value="+data.code+"]").attr("selected",true);
意思是,当第一个下拉框的值变化时,触发这个函数,获取第一个下拉框的值,填充第二个下拉框,然后匹配搜索再选中值,本来按照这个顺序执行是没有问题的,可是我debugger到这个 $("#category2").find() 的 时候,一直是下拉框里没有值,当我在category1change函数里debugger时,有值,这就很奇怪了,一直不能解决,
确实是当你有时候被一个问题困住很久的时候,出去放松下吧,说不准就有灵感了,
回来时,突然发现,ajax有同步和异步两种,就是这个关键字
async: true,
之前就是知道这个异步同步,也没在意,他的意思是是否异步加载,
原来问题就是设置异步加载的时候,他会继续向下执行函数,也就是ajax执行了一半,异步去执行了那个$("#category2").find()然后空出时间还是线程后ajax再执行了他的success函数,填充了第二类的下拉框,导致不能选中,
因此要设置成同步async: false; ajax完全执行完,再继续向下执行
这样就解决了,
有时候真的是 了解了这个知识,但是没有实际去使用体验,还是不能充分理解他,公司面试的时候会问,ajax的两种方式,我只是在网上看过,但是没有真正用过,这就导致我这个问题的发生