javascript - 调用 $.ajax 后的数组变量变为空

Question

我使用 ajax 将我的部门名称填充到一个数组中。在 $.each 期间，departmentName 有一个值，但是在我记录 departmentName 时，ajax 结束后它没有值。

      $("#Search").click(function () {
            var titleId = $("#title").val();
            var departmentGenericId = $("#department").val();
            var startDate = $("#startDate").val();
            var endDate = $("#endDate").val();

            var departmentName = [];
            var complianceValue = [];
            var nonComplianceValue = [];
            var complianceRate = [];
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: '/AcknowledgementAdminLevel/AcknowledgemetnComplianceRate/',
                data: {"titleId": titleId, 
                    "departmentGenericId" : departmentGenericId, 
                    "startDate" : startDate,
                    "endDate" : endDate
                },
                dataType: "json",
                success: function (data) {                                       
                    $.each(data, function () {                            
                        departmentName.push(this.DepartmentName);
                        complianceValue.push(this.Compliance);
                        nonComplianceValue.push(this.NonCompliance);
                        complianceRate.push(this.ComplianceRate);                            
                    });
                }                   
            });               
            console.log(departmentName);               
        });       

Answer 1

ajax 调用是异步调用的，因此执行 console.log 语句时不会填充 departmentName。如果您真的想通过添加 async 选项来将 ajax 调用设置为同步执行，如下所示：

$.ajax({
        async: false,
        //...

到选项。然后，ajax 调用将在继续执行之前等待响应。