如何在 JavaScript 中使用全局变量

Question

我想在顶部 ajax 表单中更改全局变量并在底部 ajax 形式中使用它。当我这样做时，这是行不通的：

var xGlobalTitle; //global variable that I want to use
$.ajax({
    type: 'GET',
    url: '/Home/postInformationofConferenceTitle',
    dataType: "JSON",
    success: function (data) {
            xGlobalTitle = data.xglobalTitle; //I want to change the value of the variable in here.
    }
})

    alert(window.xGlobalTitle); //And I want to use this value in here
    $.post("/Home/selectRooms", { xtitle: xGlobalTitle }, function (data) {
            var ndx = 0;
            $.each(data.xroom_name, function (key, value) {
                var Xroom_name = data.xroom_name[ndx];
                var Xroom_plan = data.xroom_plan[ndx];
                var column =
                  ('<tr>' +
                    '<td>' +
                    '<div class="img-container">' +
                    '<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
                    '</div>' +
                    '</td>' +
                    '<td id="imgname">' + Xroom_name + '</td>' +
                    '<td class="text-right">' +
                    '<a href="#" class="btn btn-simple btn-warning btn-icon edit" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>' +
                    '<a href="#" class="btn btn-simple btn-danger btn-icon remove" ><i class="fa fa-times"></i></a>' +
                    '</td>' +
                    '</tr>');
                document.getElementById('colmn').innerHTML = document.getElementById('colmn').innerHTML + column;
                ndx++;
            });
        });

我该怎么做.在这方面有没有人会支持我？

Answer 1

这是行不通的，因为 ajax 是异步的。不确定第一个ajax何时会被success

因此，为了使用第二个 ajax 中的值，您需要等到第一个 ajax 成功。这个问题可以通过链接所有ajax或使用Promise来解决，.then

此外.done jquery ajax的方法也会有所帮助。将$.post放在 .done 回调函数中

var xGlobalTitle; //global variable that I want to use
$.ajax({
    type: 'GET',
    url: '/Home/postInformationofConferenceTitle',
    dataType: "JSON",
    success: function (data) {
        xGlobalTitle = data.xglobalTitle; //I want to change the value of the variable in here.
    }
}).done(function(data){
    alert(window.xGlobalTitle)
    $.post("/Home/selectRooms", { xtitle: xGlobalTitle }, function (data) {
     //rest of the code
    })
})

Answer 2

这是一个时间问题，而不是访问全局变量的问题。您的alert先执行xGlobalTitle = data.xglobalTitle;。

Answer 3

在你的ajax中，你应该使用async: false

点击此链接 来自 库存溢出答案

var xGlobalTitle; //global variable that I want to use
$.ajax({
    type: 'GET',
    async: false,
    url: '/Home/postInformationofConferenceTitle',
    dataType: "JSON",
    success: function (data) {
            xGlobalTitle = data.xglobalTitle; //I want to change the value of the variable in here.
    }
})

Answer 4

您的第二个请求正在发生，而无需等待来自第一个请求(异步调用(的数据，因此有很多方法可以做到这一点，这也是其中之一

var xGlobalTitle;//我想使用的全局变量$.ajax({ 类型："获取"， 网址： '/home/postInformationofConferenceTitle'， 数据类型："JSON"， 成功：函数(数据({

        xGlobalTitle = data.xglobalTitle; //I want to change the value of the variable in here.
        alert(window.xGlobalTitle); //And I want to use this value in here
        $.post("/Home/selectRooms", { xtitle: xGlobalTitle }, function (data) {
                var ndx = 0;
                $.each(data.xroom_name, function (key, value) {
                    var Xroom_name = data.xroom_name[ndx];
                    var Xroom_plan = data.xroom_plan[ndx];
                    var column =
                      ('<tr>' +
                        '<td>' +
                        '<div class="img-container">' +
                        '<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
                        '</div>' +
                        '</td>' +
                        '<td id="imgname">' + Xroom_name + '</td>' +
                        '<td class="text-right">' +
                        '<a href="#" class="btn btn-simple btn-warning btn-icon edit" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>' +
                        '<a href="#" class="btn btn-simple btn-danger btn-icon remove" ><i class="fa fa-times"></i></a>' +
                        '</td>' +
                        '</tr>');
                    document.getElementById('colmn').innerHTML = document.getElementById('colmn').innerHTML + column;
                    ndx++;
                });
            });
}

}(