javascript - 无法在同一 html 页面上的其他脚本元素中使用来自 JS 的全局变量和 AJAX 调用

Question

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

我正在使用 Bootstrap 框架。

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

然后在另一个脚本(模态内)中，我使用该变量输出为文本。当我在 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> 

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

Answer 1

发生这种情况是因为 theVariable 超出了 $.ajax() 的范围。

这应该有效:

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