javascript - 如何确定 jquery ajax 调用何时完成？

Question

我有一个国家/地区下拉列表，并有一个 jquery ajax 调用，该调用用国家/地区名称填充下拉列表。问题是我需要知道调用何时完成，然后才能确定选择哪个国家/地区。也就是说，我在使用 ajax 调用的函数之后调用的任何函数都被调用得太快(在填充下拉列表之前)，因此以下函数将崩溃。 我也不想使用 async=false (因为这会导致更多问题并且是不好的做法)。 实现这一目标的正确方法是什么？

这是一个通用的 ajax 函数，用于检索数据并使用参数 id 填充特定类型的选择下拉列表 (ddl):

   function RetrieveDD(ddl, ddtype, id) {
        var servicename;
        switch (ddtype) {
            case 'country':
                servicename = "LoadCountries";
                break;
            case 'state':
                servicename = "LoadStateProvinces";
                break;
            case 'city':
                servicename = "LoadCityLocalities";
                break;
            default:
                servicename = "";
        }
        if (servicename != "") {
             $.ajax({
                url: 'DDService.asmx/' + servicename,
                dataType: 'json',
                method: 'post',
                data: { ID: id },
                success: function (data) {
                    ddl.empty();
                    $.each(data, function (index) {
                        ddl.append($("<option" + (index == 0 ? " selected" : "") + "></option>").val(this['V']).html(this['T']));
                    });
                },
                error: function (err) {
                    console.log('Error (RetrieveDD): ' + JSON.stringify(err, null, 2));
                }
            });
        };
    };

我有一个执行此操作的测试按钮，并希望获取所选选项的值(这将调用以填充状态，获取第一个所选状态的值并再次调用以填充城市)。问题非常明显:在不知道前一个下拉列表的选定值的情况下，我不能说填充下一个下拉列表(因此我必须有办法等待下拉列表首先填充)。

        $('#btnTest').click(function () {
           RetrieveDD($("#ddlCountries"), "country", 0);

            var cid = $("#ddlCountries").val();  //this is still undefined because ajax call above not completed 
            alert("cid = " + cid);    //normally another call would be made here to populate the states
        });

单击该按钮时，您会立即看到弹出的警报框(没有 cid 值)，并且只有在单击警报对话框中的 [确定] 按钮后才会填充国家/地区下拉列表。基本上，它的顺序是错误的。

如果我将async:false添加到ajax例程中，您将看到显示正确cid的警报，但是，正如人们已经发布的那样，您永远不应该使用async:false.我希望避免这种情况，但不确定如何正确执行此操作。 (如果有人想知道，我将从旧的 dotnet webforms 网站中删除所有 MSAjaxToolkit 垃圾，并用 jQuery ajax 替换 - 它更快、更小、更容易修复。)

这是 HTML 片段

    <input type="button" id="btnTest" value="Test" /><br />
    <div id="dd">
        <select id="ddlCountries"></select><br />
        <select id="ddlStates"></select><br />
        <select id="ddlCities"></select>
    </div>

**************** 回应为什么我相信这不是重复的 ********* 需要添加对旧版 IE 支持的要求(Windows 7、8、8.1 和某些服务器版本附带)。 IE 不支持箭头函数或 Promise(或 2015 年后的大多数 ECMA 方法)，因此很多推荐的答案虽然很优秀，但不包含此类代码。我会尝试解决这个问题并发布在这里。

Answer 1

与John M的回答类似，但用法不同。

返回$.ajax promise 并使用.done()

if (servicename!="") 
    return $.ajax({...
// else return null

$('#btnTest').click(function () {
    var ajax = RetrieveDD($("#ddlCountries"), "country", 0);
    if (ajax) {  
        ajax.done(function(data) {  
            console.log('done');
        });
    }
});