级联城市因为ajax的异步请求导致的问题

   无限极城市级联菜单 在进行ajax的异步通信的时候 ，默认加载页面就执行方法，偶尔就会出现 页面的请求有返回值但是不能加载到DOM中去的问题，在考虑过缓存问题，尝试过加参数随机数，以及使用setInterval 和 setTimeout 仍然不凑效的情况下 通过仔细分析它的ajax通信原理终于揭开谜底

   出现这个问题的主要原因就是 是用jquery的异步请求的时候，页面返回值返回过来，还没有执行返回方法，就已经往下执行了，所以应该讲异步请求改为同步请求

$.ajaxSettings.async = false;

// JavaScript Document// 城市联动function areaAjaxReturn(check,ajaxUrl){           $.ajaxSettings.async = false;//处理同步请求  //判断有几级 城市联动菜单   $.getJSON(ajaxUrl+'/shop/add/',{'type':'jibie','t':new Date().getTime()},function(data){   var span = '';   if(data.data!= ''){   for(var i=0;i<2;i++){   span += '<span class="span span'+(i+1)+'"></span>';    }         $('.area').after(span);  }   })function changes(num,area,vals){ $('.span').each(function(index, element) {if(index+1>num){ $(this).html('');}});$.getJSON(ajaxUrl+'/type/ajax',{'pid':$('.'+area).val(),'t':new Date().getTime()},function(data){  var html = '';  if(data.data!=null){   html  = '<select class="aress area'+num+'">';  html += '<option value="-1">请选择</option>';    $.each(data.data,function(index,val){   html += '<option value="'+val.area_code+'">'+val.area_name+'</option>';   })  html += '</select>';  }  $('.span'+num).html(html); $('.area'+num).change(function(){ var valsz = vals; if($(this).val() != '-1'){   valsz = vals+$(this).val()+','; } $('input[name=area]').val(valsz);$('input[name=area_code]').val(valsz); changes(num+1,'area'+num,valsz);  }) })      } $('.area').change(function(){   var vals = ','+$(this).val()+','; $('input[name=area]').val(vals); $('input[name=area_code]').val(vals);  changes(1,'area',vals);    })    if(check){  $('.area').change();  }    }

使用该方法引用

areaAjaxReturn(true,'__SELF__');

在执行异步请求的时候 会偶尔出现这种情况

在变成同步请求之后就不会出现这种问题，下面是正常显示的结果