由於ajax異步請求的機制，for循環運行不會等內部ajax請求結束，而直接循環到最后。解決方法：將for循環里面的請求單獨封裝一個方法。
個人遇到的問題具體如下
下面這段代碼，如果第5行studata存在多條數據，每次課程表的標題都為最后一個孩子的 學校名稱+班級+孩子姓名。
1 ////1:獲取小孩和所在班級列表 2 GetStudentAndClassList(UserGuid, function (sdata) { 3 if (sdata.status == "success") { 4 //返回數據成功后獲取各個班級課程表 5 var studata = sdata.data; 6 for (var i = 0; i < studata.length; i++) { 7 var classguid = studata[i].CLASSGUID; //班級Guid 8 var childname = studata[i].CHILDNAME;//小孩姓名 9 var zdxxmc = studata[i].ZDXXMC; //所在學校名稱 10 var bj = studata[i].BJ;//班級名稱 11 //zdxxmc +bj+childname為課程表標題 12 GetStudentKCB(classguid, function (jdata) { 13 if (jdata.status == "success") { 14 ShowKCBStudent(jdata.data, zdxxmc +bj+childname); 15 } 16 else { 17 alert(jdata.status); 18 } 19 }); 20 } 21 } 22 else { 23 alert(jdata.status); 24 } 25 }); 26 //獲取小孩和所在班級列表ajax請求方法 27 function GetStudentAndClassList(UserGuid, CallBack) { 28 jQuery.ajax({ 29 url: Common.GlobalSettings.VirtualDirectory + "/ashx/Curriculum.ashx", 30 type: "post", 31 data: { 'method': 'studentandclasslist', 'userguid': UserGuid }, 32 dataType: "json", 33 success: function (studata) { 34 CallBack(studata); 35 }, 36 error: function (XMLHttpRequest, txtStatus, errorThrown) { 37 Common.ErrorHandle(XMLHttpRequest.status + "|" + XMLHttpRequest.readyState + "|" + txtStatus + "|" + errorThrown); 38 Common.ErrorHandle("XXTApp/NewCurriculum.aspx"); 39 40 } 41 42 }); 43 44 }; 45 //獲取學生課程表的ajax請求 46 function GetStudentKCB(ClassGuid, CallBack) { 47 48 jQuery.ajax({ 49 url: Common.GlobalSettings.VirtualDirectory + "/ashx/Curriculum.ashx", 50 type: "post", 51 data: { 'method': 'studentkcb', 'classguid': ClassGuid }, 52 dataType: "json", 53 success: function (jdata) { 54 CallBack(jdata); 55 }, 56 error: function (XMLHttpRequest, txtStatus, errorThrown) { 57 Common.ErrorHandle(XMLHttpRequest.status + "|" + XMLHttpRequest.readyState + "|" + txtStatus + "|" + errorThrown); 58 Common.ErrorHandle("XXTApp/NewCurriculum.aspx"); 59 60 } 61 62 }); 63 } 64 //顯示學生課程表 65 function ShowKCBStudent(data,KCBTitle) { 66 67 //1: 清空課程表模板 68 $("#KCBMode").html(s); 69 $("#KCBTitle").html("<p class='CourseName'>" + KCBTitle+"的課表" + "</p>"); 70 //2：讀取課程表放到隱藏的模板中 71 for (var i = 0; i < data.length; i++) { 72 $("#" + data[i].WEEKDAY + "_" + data[i].CLASSNUM).attr("title", data[i].KCM + '教師：' + data[i].TEACHERNAME); 73 $("#" + data[i].WEEKDAY + "_" + data[i].CLASSNUM).attr("courseguid", data[i].COURSEGUID); 74 $("#" + data[i].WEEKDAY + "_" + data[i].CLASSNUM).html("<p class='CourseName'>" + data[i].KCM.substr(0, 1) + "</p><p class='ClassName'>" + data[i].TEACHERNAME + "</p>"); 75 } 76 //3：讀取模板中的課程表，放到新的table顯示 77 //<div><table class="CurriculumTable" style="display: block" cellpadding="0" cellspacing="0" border="0"> 78 var KCBhtml = "<div><table class=\"CurriculumTable\" style=\"display: block\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"; 79 KCBhtml += $("#KCBMode").html(); 80 KCBhtml += "</table></div>"; 81 //為了拼接后的課程表不影響模板，將ID換成KCBid之后再添加到Container div中 82 var KCB = KCBhtml.replace(new RegExp('id', 'gm'), "KCBid"); 83 $("#Container").append(KCB); 84 }
結果如下：
解決后的結果：
解決方法，將for循環內的每次請求封裝為一個單獨的方法。修改后代碼如下：
1 //1:獲取小孩和所在班級列表 2 GetStudentAndClassList(UserGuid, function (sdata) { 3 if (sdata.status == "success") { 4 //返回數據成功后獲取各個班級課程表 5 var studata = sdata.data; 6 for (var i = 0; i < studata.length; i++) { 7 var classguid = studata[i].CLASSGUID; //班級Guid 8 var KCBTitle = studata[i].ZDXXMC + studata[i].BJ +studata[i].CHILDNAME;//學校+班級+姓名 作為課程表標題 9 GetKCBajax(classguid, KCBTitle); 10 } 11 } 12 else { 13 alert(jdata.status); 14 } 15 }); 16 //由於ajax異步請求，在for循環會有問題。for循環不會等ajax請求返回結果結束,故單獨封裝成方法 17 function GetKCBajax(classguid, KCBTitle) { 18 GetStudentKCB(classguid, function (jdata) { 19 if (jdata.status == "success") { 20 ShowKCBStudent(jdata.data, KCBTitle); 21 } 22 else { 23 alert(jdata.status); 24 } 25 }); 26 } 27 28 //顯示學生課程表 29 function ShowKCBStudent(data,KCBTitle) { 30 31 //1: 清空課程表模板 32 $("#KCBMode").html(s); 33 $("#KCBTitle").html("<p class='CourseName'>" + KCBTitle+"的課表" + "</p>"); 34 //2：讀取課程表放到隱藏的模板中 35 for (var i = 0; i < data.length; i++) { 36 $("#" + data[i].WEEKDAY + "_" + data[i].CLASSNUM).attr("title", data[i].KCM + '教師：' + data[i].TEACHERNAME); 37 $("#" + data[i].WEEKDAY + "_" + data[i].CLASSNUM).attr("courseguid", data[i].COURSEGUID); 38 $("#" + data[i].WEEKDAY + "_" + data[i].CLASSNUM).html("<p class='CourseName'>" + data[i].KCM.substr(0, 1) + "</p><p class='ClassName'>" + data[i].TEACHERNAME + "</p>"); 39 } 40 //3：讀取模板中的課程表，放到新的table顯示 41 //<div><table class="CurriculumTable" style="display: block" cellpadding="0" cellspacing="0" border="0"> 42 var KCBhtml = "<div><table class=\"CurriculumTable\" style=\"display: block\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"; 43 KCBhtml += $("#KCBMode").html(); 44 KCBhtml += "</table></div>"; 45 //為了拼接后的課程表不影響模板，將ID換成KCBid之后再添加到Container div中 46 var KCB = KCBhtml.replace(new RegExp('id', 'gm'), "KCBid"); 47 $("#Container").append(KCB); 48 } 49 //獲取孩子以及所在班級列表 50 function GetStudentAndClassList(UserGuid, CallBack) { 51 jQuery.ajax({ 52 url: Common.GlobalSettings.VirtualDirectory + "/ashx/Curriculum.ashx", 53 type: "post", 54 data: { 'method': 'studentandclasslist', 'userguid': UserGuid }, 55 dataType: "json", 56 success: function (studata) { 57 CallBack(studata); 58 }, 59 error: function (XMLHttpRequest, txtStatus, errorThrown) { 60 Common.ErrorHandle(XMLHttpRequest.status + "|" + XMLHttpRequest.readyState + "|" + txtStatus + "|" + errorThrown); 61 Common.ErrorHandle("XXTApp/NewCurriculum.aspx"); 62 } 63 }); 64 65 }; 66 //獲取學生課程表 67 function GetStudentKCB(ClassGuid, CallBack) { 68 69 jQuery.ajax({ 70 url: Common.GlobalSettings.VirtualDirectory + "/ashx/Curriculum.ashx", 71 type: "post", 72 data: { 'method': 'studentkcb', 'classguid': ClassGuid }, 73 dataType: "json", 74 success: function (jdata) { 75 CallBack(jdata); 76 }, 77 error: function (XMLHttpRequest, txtStatus, errorThrown) { 78 Common.ErrorHandle(XMLHttpRequest.status + "|" + XMLHttpRequest.readyState + "|" + txtStatus + "|" + errorThrown); 79 Common.ErrorHandle("XXTApp/NewCurriculum.aspx"); 80 81 } 82 83 }); 84 }