jquery ajax的async屬性的理解

 1 $(function(){
 2     queryTemplateSort();
 3     //
 4     fillAddTemplatePage();
 5     function queryTemplateSort() {
 6         $.ajax({
 7             type: "post",
 8             url: "http://localhost:8080/...",
 9             data: {"pageNo": 1, "pageSize": 20},
10             dataType: "json",
11             success:function(data){
12                 var sortArray = data.dataList;
13                 for(var i = 0; i < sortArray.length; i++) {
14                     var option = "<option value='"+ sortArray[i].id +"'>"+ sortArray[i].name +"</option>";
15                     var $selectElement = $(".templateSelectDiv select");
16                     $selectElement.append(option);
17                 }
18             }
19         }); 
20     }
21     fillAddTemplatePage();
22     function fillAddTemplatePage() {
23     var varUrl = window.location.search;
24     if(varUrl === "") {
25         return;
26     }
27     var topicid = "" + parseToNum(varUrl);
28     var jsonObject = {"topicid": topicid};
29     var jsonStr = JSON.stringify(jsonObject);
30     $.ajax({
31         type: "post",
32         url: "http://localhost:8080/....",
33         data: {'params':jsonStr},
34         dataType: "json",
35         success: function(data){
36             fillData(data.obj);
37         }    
38     });
39}
40        /**填充頁面數據*/
41 function fillData(data) {
42     document.getElementById("magazineTopicId").value = data.id;
43     $(".templateSelectDiv select option[value='" + data.categoryId + "']")[0].selected = true;    //erro undefined
44     document.getElementById("title").value = data.varName;
45     document.getElementById("chooseMusic").value = data.music.name;
46     document.getElementById("musicLink").value = data.music.link;
47     fillPage(data);
48}
49      .....
50}
1 //jsp
2 <div class="templateSelectDiv">
3     <select >
4         <option value="0">所有</option>
5     </select>
6 </div>

加載這個jsp的時候調用queryTemplateSort方法,其中用ajax請求到數據後把選項拼接到這個select框中,第24行若是請求的url沒有帶參數則不填充頁面數據,若是帶了參數就根據一個id去查詢這個頁面的數據,而後回寫到頁面,可是由於在調用queryTemplateSort方法,ajax請求沒有設置async屬性,默認爲true,支持異步,就是執行queryTemplateSort方法的同時分出一個線程繼續向下執行fillAddTemplatePage方法,而這個方法的選擇器選中的元素是queryTemplateSort執行完畢後才添加上去的,因此當若是queryTemplateSort沒執行完就執行fillAddTemplatePage,下面這個語句就會報undefined的錯誤。當設置async: false時(意思是不分出另外的線程,執行完該方法後纔會繼續執行其餘代碼),這個時候當再執行到fillAddTemplatePage時,queryTemplateSort已經執行成功,這時就不會報錯。ajax

$(".templateSelectDiv select option[value='" + data.categoryId + "']")[0].selected = true;
後來發現就算取消了異步請求這樣選中下拉框的選項仍是會出現undefined的錯誤,而下拉框已經加載完成,不得要領,後來無賴改爲
$(".templateSelectDiv select").val(data.categoryId)來選中下拉框。
相關文章
相關標籤/搜索