javascript - 如何让ajax调用div更新等到它完成

Question

我使用融合图，所以在融合图链接事件中我有以下代码

if (eventObject.eventType == "linkeditemopened") {
   var url = "/" + $("#appName").val() + "/reports/getUserFilter?isSelectedLegends=true&isSelected=false&isDuplicateReq=true"          
   $('#legendListIdDiv').load(url);
   loadMultiselectDropdown()
}

和下面的 loadMultiselectDropdown() 方法

function loadMultiselectDropdown(){
    alert('called load mil')
    var filterList1= $("#updatedlegendListId").val();
    var filterList= $("#legendListId").val();
    alert('type-- '+typeof filterList)
    console.log('filterList1-- '+filterList)
    alert('type-- '+typeof filterList1)
    console.log('filterList1-- '+filterList1)
    var filterList= $("#legendListId").val();
    if(!filterList1 == ''){
        $("#impact-report-user-filter-dropdown-div").show();
        $("#impact-report-user-filter-dropdown").multiselect({ 
              noneSelectedText: 'Select Legends',
              selectedText: '# Legends Selected'
        });
        for(f in filterList1){
            $('#impact-report-user-filter-dropdown').append($('<option>', {
                 value: filterList[f],
                 text:  filterList[f]
            }));
        }
        $("#impact-report-user-filter-dropdown").multiselect("refresh"); 
    }
}

但是在 console.log('filterList1-- '+filterList1) 行，我得到的是未定义的值，而不是一些值作为字符串。

这里是dom

`<div id="legendListIdDiv">
    <input type="hidden" name="updatedlegendList" id="updatedlegendListId" value="Hyderabad Factory,Delhi Registered Office,Mumbai Warehouse,Bangalore Development Centre,">
</div>`

为什么？我猜是因为 ajax 在执行 var filterList1= $("#updatedlegendListId").val(); line

之前没有完成

如何克服？

Answer 1

调用 loadMultiselectDropdown() 作为 load() 的回调:

if (eventObject.eventType == "linkeditemopened") {
   var url = "/" + $("#appName").val() + "/reports/getUserFilter?isSelectedLegends=true&isSelected=false&isDuplicateReq=true"          
   $('#legendListIdDiv').load(url,loadMultiselectDropdown);
}

Ajax 请求是异步的，因此您必须以某种方式等待它结束才能使用结果。在您的代码中，您在调用后立即调用了 loadMultiselectDropdown()，这意味着在您调用 loadMultiselectDropdown() 时请求结果尚未准备好。