使用多个 ajax 调用构建表单

Question

我正在尝试使用 2 个 ajax 调用构建一个表单。在第一个电话中，我得到了一些关于我放在表格上的排名的信息：

$.ajax({
    method: "GET",
    url: base_url + "/ranking/getranktoedit/" + rank_id,
    dataType: 'json'
}).done(function(response){
    // grab the response and complete some html and then bind the javascript to handle clicks on this new generated piece of HTML
});

在 "done" 部分中，我必须再次调用 ajax 以获取 HTML 的另一部分。我可以通过在第二个 ajax 调用中使用 "async:false" 使其工作，但我读到这已被弃用。所以问题很简单，嘿，我是否让第二个基本上停止整个过程，以便我在页面上而不是 "undefined" 上获取数据？我也在检查使用 $.when() 的选项，这似乎更容易一些，但后来我意识到我不知道如何从根本上强制异步同步......这有意义吗？我不确定我是否清楚，所以如果您需要更多详细信息，请告诉我，我会添加所需的任何其他信息。谢谢！

更新 javascript 的片段看起来像这样：

$.ajax({
    method: "GET",
    url: base_url + "/ranking/getranktoedit/" + rank_id,
    dataType: "json",
    sucess: function(response){
        let select_options;
        $.ajax({
            method:"POST",
            url: base_url + "/getdropdown",
            data: {
                field:"name"
            },
            success: function(name_dd){
                // this part is a bit more complex but it's just about putting things in the right place, nothing else
                return select_options = name_dd;
            }
        })
        let edit_form = '<div><div>' + response.some_data_from_rank + '</div>' +
            '<select>' + select_options + '</select>' +
            '</div>';

        $(".some_selector").html(edit_form);
    }
})

所以，这不起作用，当第一个 ajax 完成时，第二个 "undefined" 将抛出下拉菜单应该去的地方。如果在第二个中我使用 async:false 它工作正常。因为 async 将被弃用，我想知道是否有另一种方法可以实现同样的事情并保持这种结构（我已经有其他方法来重写整个事情并以不同的方式组织它）。谢谢！

Answer 1

你可以这样做。为新创建的 select 分配一个 id 或 selector 从第一个 ajax 加载 html 后，调用第二个 ajax，并使用 select 或 select，附加选项

return不成功，函数中的方式，你可以使用他的方式或回调，但对于你的情况，你可以使用这种简单的方式，

这样你不需要async:false，但是如果你想return，意思是从ajax获取值并在它之后使用它，那么你需要async:false 为之。

$.ajax({
    method: "GET",
    url: base_url + "/ranking/getranktoedit/" + rank_id,
    dataType: "json",
    sucess: function(response){
        let select_options;

        let edit_form = '<div><div>' + response.some_data_from_rank + '</div>' +
            '<select id="mySelect">' + select_options + '</select>' +
            '</div>';

        $(".some_selector").html(edit_form);// html is loaded now

        // second ajax to call dropdown content or whatever          
         $.ajax({
            method:"POST",
            url: base_url + "/getdropdown",
            data: {
                field:"name"
            },
            success: function(name_dd){
                $('#mySelect').val(name_dd); // this will select the option

            }
        })

    }
})

使用多个 ajax 调用构建表单

build form with several ajax calls

javascript

jquery

ajax

asynchronous

synchronous