不能在同一个html页面上的其他脚本元素中使用JS中的全局变量和AJAX调用

Question

我一直在四处寻找如何在页面上使用一个脚本中的变量并在另一个脚本中使用它。我发现你可以将你的变量设置为全局（虽然这不是首选，但我找不到更好的方法）。

我正在使用Bootstrap框架。

在我的页面上，我在一个函数中有一个AJAX调用。我已经在函数前面声明了变量，因此它是一个全局变量。变量的值在AJAX调用的success函数中设置。

在另一个脚本中（在模态内）我然后使用该变量作为文本输出。当我在AJAX函数之外设置变量的值时，这会起作用，但是当在AJAX成功中设置值时，它会给出value ='undefined'。

使用变量的模态仅在AJAX成功函数之后打开，但是在AJAX请求之前可能已经读取了值，即使未显示模态也是如此？有没有办法说它只需要在AJAX成功函数后加载？

这是我的AJAX函数代码的摘要：

<script type="text/javascript">
var theVariable;
function() {
    //AJAX Call
    $.ajax({
        //Abbreviated
        success: function(data) {
            theVariable = "test";
        }
    });
}

这是我在模态中用来读取变量的代码

<p id="demo"></p>
<script>
     document.getElementById("demo").innerHTML = theVariable;
</script> 

所以回顾一下，当我在声明它时（在AJAX函数之外）设置theVariable的值时，该值显示在模态中。但是，当我尝试在AJAX成功函数内设置值时，此值未定义。

Answer 1

这是因为theVariable超出了$.ajax()的范围。

这应该工作：

var theVariable;
function() {
    var that = this;
    //AJAX Call
    $.ajax({
        //Abbreviated
        success: function(data) {
            that.theVariable = "test";
        }
    });
}