jQuery嵌套forEach中加入AJAX请求后UI无渲染问题咨询

问题根本原因 #

你遇到的是AJAX异步执行顺序问题：

• AJAX默认是异步请求，你在$.each循环里触发的内层GET请求不会立刻执行，浏览器会先把外层同步的tbody字符串拼接逻辑全部执行完，先调用$('#main-group-list tbody').html(tbody)把表格渲染到页面上
• 内层AJAX请求是在表格已经渲染完成后才返回结果的，这时候你再修改tbody字符串变量，已经不会对已经渲染好的DOM产生任何影响，所以控制台能打印数据但页面空白。

解决方案1：预加载内层依赖数据（推荐，性能最优） #

先提前拉取所有需要的群组用户/类型数据，再同步渲染表格，避免循环中重复发AJAX请求：

该方案适合所有行的用户/类型列内容一致的场景，若每个群组需要单独拉取对应所属用户，使用方案2

fetchgroup();
function fetchgroup() {
    var current_category_id = $('#current_category_id').val();
    var current_status = $('#current_status').val();
    // 第一步：先拉取群组用户列表，存在变量里备用
    $.get("/clinical/bbr-group-configuration-group-user-list", function(userRes) {
        var allGroupUsers = userRes.all_group_users;
        // 第二步：再拉取群组列表渲染表格
        $.ajax({
            type: "GET",
            url: "/clinical/bbr-group-configuration-group-list/"+current_category_id+"/"+current_status,
            dataType: "json",
            success: function (response){
                var tbody = "";
                $.each(response.all_groups, function(key, group) {
                    tbody += '<tr>' +
                    '<td><p class="font-weight-bold mb-0">' + group.group_name + '</p>' + group.group_description + '</td>' +
                    '<td>' + group.group_type_name + '</td>' +
                    '<td>';
                        // 直接用预加载的用户数据拼接，同步执行
                        $.each(allGroupUsers, function (key, group_type_user) {
                            tbody+='<p>'+group_type_user.name+'</p>'
                        });
                    tbody += '</td>' +
                    '<td>' + getgroupstatus(group.effective_start_datetime, group.effective_end_datetime) + '</td>' +
                    '<td>' +
                    '<button type="button" value="' + group.id + '" class="edit_group btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button> ' +
                    '<button type="button" value="' + group.group_id + '" title="delete ' + group.group_name + '" class="delete_group btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>' +
                    '</td>' +
                    '</tr>';
                });
                $('#main-group-list tbody').html(tbody)
            }
        });
    })
}

解决方案2：按行动态渲染DOM（适合需要按群组ID传参拉取对应群组用户的场景） #

给每行的用户列添加唯一标识，内层AJAX返回后直接操作DOM更新内容，不依赖全局tbody字符串拼接：

fetchgroup();
function fetchgroup() {
    var current_category_id = $('#current_category_id').val();
    var current_status = $('#current_status').val();
    $.ajax({
        type: "GET",
        url: "/clinical/bbr-group-configuration-group-list/"+current_category_id+"/"+current_status,
        dataType: "json",
        success: function (response){
            var tbody = "";
            $.each(response.all_groups, function(key, group) {
                tbody += '<tr>' +
                '<td><p class="font-weight-bold mb-0">' + group.group_name + '</p>' + group.group_description + '</td>' +
                '<td>' + group.group_type_name + '</td>' +
                // 给用户列加唯一ID，关联当前群组ID
                '<td id="group-user-'+group.id+'">' +
                '</td>' +
                '<td>' + getgroupstatus(group.effective_start_datetime, group.effective_end_datetime) + '</td>' +
                '<td>' +
                '<button type="button" value="' + group.id + '" class="edit_group btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button> ' +
                '<button type="button" value="' + group.group_id + '" title="delete ' + group.group_name + '" class="delete_group btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>' +
                '</td>' +
                '</tr>';
                // 内层请求传当前群组ID，返回后直接更新对应DOM
                $.get("/clinical/bbr-group-configuration-group-user-list?group_id="+group.id, function(userRes) {
                    var userHtml = "";
                    $.each(userRes.all_group_users, function (key, group_type_user) {
                        userHtml+='<p>'+group_type_user.name+'</p>'
                    });
                    // 直接更新对应列的内容
                    $('#group-user-'+group.id).html(userHtml);
                });
            });
            $('#main-group-list tbody').html(tbody)
        }
    });
}

内容的提问来源于stack exchange，提问作者user16409170