1. 程式人生 > >ajax同步非同步的坑

ajax同步非同步的坑


function companyValueULHtml(){
	var faxhtml ='';
	var tel = '';
	faxhtml += '<select style="width:100px;height:30px;" id="companyfaxcountrycode" name="companyfaxcountrycode" function="changeCompanyFaxCountry()">'
	 //獲取國碼
	$.ajax({
		type : 'post',
		url : '<s:url value="/countryCodeAction_getAjaxCountryCodeList.action"/>',
		async:false,///設定同步請求完後在執行
dataType : 'json', error : function(XMLHttpRequest, textStatus, errorThrown) { ErrorReminder(XMLHttpRequest); //請求錯誤提示 }, success : function(data) { for(var index in data){ var country = data[index]; var countryName = country.countryName; countryCode = country.countryCode; countryNameKey = country.countryNameKey; //console.log(JSON.stringify(country)); if (index == 0){ //預設選擇第一個 faxhtml += '<option value="'+countryCode+'" selected="selected">'+countryName+'</option>'; tel += '<option value="'+countryCode+'" selected="selected">'+countryName+'</option>'; mobilecountrycode = countryCode; //驗證行動電話 telcountrycode = countryCode; //驗證固定電話 faxcountrycode = countryCode; //驗證傳真 } else{ faxhtml += '<option value="'+countryCode+'">'+countryName+'</option>'; tel += '<option value="'+countryCode+'">'+countryName+'</option>'; } } faxhtml +='</select>'; var theHtml = ''; theHtml += '<li class="customercountrycodeli"><span><p>'; theHtml += '公司傳真:'; theHtml += '</p></span>'; theHtml += faxhtml + '<input name="edcustomercompanyfax" id="companyfax" />'; theHtml += '</li>'; theHtml += '<li><span><p>'; theHtml += '公司主頁:'; theHtml += '</p></span>'; theHtml += '<input name="edcustomercompanyweb" id="companyweb" >'; theHtml += '</li>'; theHtml += '<li><span><p>'; theHtml += '<s:text name="1446711635441683">註冊編號</s:text>:'; theHtml += '</p> </span>'; theHtml += '<input name="edcustomercompanynumber" id="companynumber" class="companynumber" >'; theHtml += '</li>'; theHtml += '<li><span style="display:inline;"><p>'; theHtml += '<s:text name="1446711635521769">註冊時間</s:text>:'; // theHtml += '</p></span><div class="date" style="display:inline;position:relative;"><input id="timespan" onclick="'+"WdatePicker({skin:'whyGreen',el:'edcustomerbeginningdate',dateFmt:'yyyy-MM-dd'})"+'" name="edcustomerbeginningdate" ></input><img style="position: absolute;" src="images/date1.png" onclick="'+"WdatePicker({skin:'whyGreen',el:'edcustomerbeginningdate',dateFmt:'yyyy-MM-dd'})"+'"/>'; theHtml += '</p></span><div class="date" style="display:inline;position:relative;"><input id="timespan" disabled="disabled"></input><img style="position: absolute;" src="images/date1.png" id="edcustomerbeginningdateimg"/>'; theHtml += '<input type="hidden" name="edcustomerbeginningdate" id="timehide"/>'; theHtml += '</div></li>'; if(tax_rate == 1){//稅率GST theHtml += '<li><span><p>'; theHtml += '<s:text name="1469600830924705">GST編號</s:text>:'; theHtml += '</p> </span>'; theHtml += '<input name="edcustomergstno" id="gstno" >'; theHtml += '</li>'; //先隱藏掉 之後在改 } //$("#ctelcountrycode").html(tel); //$("#ctelcountrycode").append(tel); //$("#ctelcountrycode").styleSelect({styleClass:"selectDark"});//樣式 $("#changeValueUL").html(theHtml); $.parser.parse($("#changeValueUL")); $("#companyfaxcountrycode").styleSelect({styleClass:"selectDark"});//樣式 bindingcompanyCInfoVer(); //繫結客戶 在去驗證 //companyValueValidation_on();//開啟驗證 } }); }
以上是動態載入html方法
//構建 公司客戶資訊框
function companyCustomerInfo(customerdata){
	//debugger;
	companyValueULHtml();//構建html
	bindingcompanyCInfoVer();
	//設定資訊驗證}
在此方法呼叫
// 根據customer 型別構造資訊表單
function customerTypeInfochange(type_flag,customerdata){
		if(theEditFlag == 'addc'){
			$('#edaccountbirthdayimg').css("right","12px");
			$('#edaccountbirthdayimg').css("top","8px");
			edaccountbirthdayimgdatadiv.css("left","");
		}
		if(type_flag == 1){//ycw:大客戶 and 公司客戶
			$('#customereditmenudiv').css("height",getHeight(660,100));
			$('#changeValueUL').show();
			 document.getElementById("customerNameP").innerHTML = '<s:text name="1446711635481558">公司名稱</s:text>:';
			 //客戶姓名提示相關
			$("#customerprompt").css("display","none");
			if(theEditFlag == 'addc'){
				$('.accountNameLi').show();								
				$('#firstname').verification('enableValidation'); //啟動輸入框驗證 
				$('#secondname').verification('enableValidation'); //啟動輸入框驗證 
				$('#accountfaxLi').hide();
				/* var theLI = document.getElementById("accountmobleTelLi");
				theLI.innerHTML =accountMoblieliHtml();
				$.parser.parse(theLI); */
				//accountMoblieliHtml();
				$('#accountmobleTelLi').show();
				creatajaxDateValidate('mobile','mobile','mobile',true,ajaxDateValidateUrl,"accountmobile");
				$('#mobile').verification('enableValidation'); //啟動輸入框驗證
				$('#mobile').verification('setajaxDefultval',''); //設定當前值
				
				//$("#mobilecountrycode").styleSelect({styleClass:"selectDark"});
			}
			companyCustomerInfo(customerdata);
		}}

然後通過select標籤選擇型別的時候進行出發

//客戶型別選擇變更執行方法   改變對應的客戶型別動態屬性ul
function customerTypeSelChange(option,customerdata){
	$.ajax({
		type : 'post',
		url:'<s:url value="customerType_ajaxGetCustomerType.action"/>?Typeid='+option,
		dataType : 'json',
		success : function(data){
			var theUl = document.getElementById("changeValueUL");
			var childs = theUl.childNodes;
			for ( var i = childs.length - 1; i >= 0; i--) {
				theUl.removeChild(childs[i]);
			}
			customertypeflag = data.customertypeflag;
			/************私人使用者,學生******去掉電話**************2016-12-30*******************************************************************/
			if(data.customertypeflag == 3 || data.customertypeflag == 2){
				$('#companytel').verification('disableValidation'); //停止輸入框驗證 
				$('#companyfax').verification('disableValidation'); //停止輸入框驗證 
				//$('#companyfax').removeClass("verification-invalid");
				$('#companytel').val("");
				$('#telli').css({"display":"none"});
			}else{
				$('#companytel').verification('enableValidation'); //啟動輸入框驗證 
				$('#companyfax').verification('enableValidation'); //啟動輸入框驗證 
				//$('#companyfax').removeClass("verification-invalid");
				//$('#companyfax').addClass("verification-invalid");
				$('#telli').css({"display":"block"});
			}
			/*********************************************************2016-12-30***********************************************************/
			customerTypeInfochange(data.customertypeflag,customerdata);
		}
	});
}
主要原因是  當頁面載入時第一次
 companyValueULHtml()
非同步載入時 沒載入完返回結果接跳過了~ 查看了一下~居然迴圈2次結果,當你設定debugger; 或者alert 時 就會出現回填
companyCustomerInfo(customerdata)
此方法才真正獲取到
companyValueULHtml()
非同步的html元素~  所以 需在
companyValueULHtml()
方法裡面ajax請求設定同步請求~ 意思是ajax同步完後再去執行以下操作。