在Javascript中将Ajax结果分配给全局变量

我有一个方法发送AJAX请求并返回一个结果，指示令牌记录的JSON string ，我正在尝试获取此结果并将其分配给一个名为tokens的全局变量，然后在其他函数中重用此全局变量。

我将结果分配给该变量并将其记录到控制台，如下所示：

 var tokens = null; function PopulateAllTokens() { $.ajax({ type: "POST", url: "NewToken.aspx/PopulateAllTokens", contentType: "application/json; charset=utf-8", dataType: "json", error: function (XMLHttpRequest, textStatus, errorThrown) { alert("Request: " + JSON.stringify(XMLHttpRequest) + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); }, success: function (result) { tokens = JSON.parse(result.d); console.log(tokens); populateTokensToTable(tokens); } }); } 

问题在于，当我将结果分配给变量然后将其记录到控制台时，它会成功显示结果，但是当我想稍后在其他函数中重用它时，它会显示变量仍为null 。

例如，我想在以下jQuery代码中使用它，但它显示该变量为null：

 $("#example").DataTable({ "columns": getTokens(), "data": tokens }); 

只是为了澄清变量和函数都在内部定义：

$(document).ready(function () {//function and var}

有什么建议吗？

Answer 1

在全局使用变量之前，请确保AJAX回调已完成

大多数情况下，当您尝试通过AJAX获取值然后尝试在整个$.ajax()构造之外使用该值时，会出现问题。 原因是来自异步调用的响应只能在其success或complete回调中安全访问 – 无法保证在任何一个回调完成之前将填充该值。 要解决此问题，您可以移动以下所有代码以从AJAX回调中调用，或者等待回调设置全局变量。

使用回调继续运行脚本

 var tokens = null; function PopulateAllTokens() { $.ajax({ type: "POST", url: "NewToken.aspx/PopulateAllTokens", contentType: "application/json; charset=utf-8", dataType: "json", error: function (XMLHttpRequest, textStatus, errorThrown) { alert("Request: " + JSON.stringify(XMLHttpRequest) + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); }, success: function (result) { tokens = JSON.parse(result.d); console.log(tokens); populateTokensToTable(tokens); EverythingElseYouWantToRun(); } }); } function EverythingElseYouWantToRun() { // you can do whatever you want with the response here $("#example").DataTable({ "columns": getTokens(), "data": tokens }); } 

使用您的消费脚本等待变量

 var tokens = null; function PopulateAllTokens() { $.ajax({ type: "POST", url: "NewToken.aspx/PopulateAllTokens", contentType: "application/json; charset=utf-8", dataType: "json", error: function (XMLHttpRequest, textStatus, errorThrown) { alert("Request: " + JSON.stringify(XMLHttpRequest) + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); }, success: function (result) { tokens = JSON.parse(result.d); console.log(tokens); populateTokensToTable(tokens); } }); } function RunWhenVariableIsPopulated(variable, callback, timeout) { if (variable === null) { setTimeout(function() { RunWhenVariableIsPopulated(variable, callback, timeout); }, timeout); } else { callback(variable); } } 

然后你可以打电话：

 RunWhenVariableIsPopulated(tokens, function() { $("#example").DataTable({ "columns": getTokens(), "data": tokens }); }, 400 /* or whatever your average round-trip time is*/); 

注意：如果您的AJAX响应时间非常长，这会导致浏览器显着挂起，并有效地将异步调用转换为同步调用。 希望这有助于您当前的情况！

Answer 2

 function getData(){ return $.ajax({ type: "POST", url: "NewToken.aspx/PopulateAllTokens", contentType: "application/json; charset=utf-8", dataType: "json", async: false, error: function (XMLHttpRequest, textStatus, errorThrown) { alert("Request: " + JSON.stringify(XMLHttpRequest) + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); }, success: function (result) { tokens = JSON.parse(result.d); console.log(tokens); populateTokensToTable(tokens); } }).responseText; } var res = getData(); 

上面的代码会将响应存储在变量中，之后您可以解析它并根据需要进行修改。 我不确定，但它可以帮助你

Answer 3

使用$ .parseJSON（）方法

$（document）.ready（）没关系，只有函数调用flow，你也可以在外面声明函数并相应地调用它，并且还可以检查变量是否为null

 var tokens = null; function PopulateAllTokens() { $.ajax({ type: "POST", url: "NewToken.aspx/PopulateAllTokens", contentType: "application/json; charset=utf-8", dataType: "json", error: function (XMLHttpRequest, textStatus, errorThrown) { alert("Request: " + JSON.stringify(XMLHttpRequest) + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); }, success: function (result) { tokens = $.parseJSON(result.d); console.log(tokens); populateTokensToTable(tokens); } }); } if(tokens) console.log(tokens);