jQuery ajax 调用后无法将 Response.d 的值复制到局部变量

Question

我正在调用代码隐藏中的方法。获得数据后，我无法将数据复制到局部变量。

我创建了一个局部变量。我尝试在 2 个地方控制台记录 Ajax 调用的结果。一是在成功回调方法里面，二是在外面。

在success方法中，我得到类似[object, object, object]的东西。但是，在外面，我得到的只是一个空数组 []。

var rowArray=[];

$.ajax({

     type: "POST",
     url: "Default.aspx/GetData",
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     data: '{ dataId: 1 }',
     success: function (response) {
            rowArray = JSON.parse(response.d);     

            //console.log(rowArray); --> this logs [object, object, object ]
     },
     failure: function (response) {
                alert(response.d);
     }
   });

 //console.log(rowArray); --> this logs []

我无法将响应复制到局部变量的任何原因？

感谢您的帮助

Answer 1

您的 success 回调签名错误，您不需要解析 JSON。试试这个：

var rowArray=[];

$.ajax({
    type: "POST",
    url: "Default.aspx/GetData",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: '{ dataId: 1 }',
    success: function (response, textStatus, jqXHR) {
        rowArray = response.d;     
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log("Could not get data")
    }
});

另外，正如ADyson 在comment 中指出的那样，在jQuery.ajax 调用中没有failure 回调。正确的名称是 error 并具有如上所示的签名。我在error 函数中添加了一个简单的错误消息，但您可以使用更复杂的内容，例如ADyson's answer 中的示例。

Answer 2

在“成功”回调之外，您会得到一个空变量，因为 ajax 调用是异步的，因此您的 rowArray 日志记录发生在“成功”回调执行之前。

在里面，由于你指定了“json”作为响应中期望的数据类型，jQuery会自动将“response”解析为JSON，因此它会自动成为一个可用的对象。没有理由再次解析它。在任何情况下，JSON.parse 方法都需要一个字符串，而不是一个对象，因此这样的调用不会成功。见https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

还值得指出的是，您的错误处理不正确，以供将来参考。在 jQuery ajax 上下文中没有像“失败”这样的回调。正确的回调是“错误”，它的第一个参数是一个 jqXHR 对象，这意味着response.d 不会在那个上下文中存在。不过，response.responseJSON 应该。有关完整文档，请参阅 https://api.jquery.com/jquery.ajax。如果将来调试不成功的调用，这将对您有所帮助。

总体而言，值得将您的代码更改为以下内容：

var rowArray=[];

$.ajax({
  type: "POST",
  url: "Default.aspx/GetData",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  data: '{ dataId: 1 }',
  success: function (response) {
    rowArray = response.d;  
  },
  error: function (jqXHR, textStatus, errorThrown ) {
    alert("Ajax Error: " + textStatus + " " + errorThrown);
    console.log(jqXHR.status + " " + JSON.stringify(jqXHR.responseJSON));
  }
});

Answer 3

您的最后一个 console.log(rowArray) // 此日志 [] 在 ajax 调用终止之前执行。 如果你需要执行一个同步的ajax调用，只需使用：

$.ajax({
        type: "POST",
        url: "Default.aspx/GetData,
        async: false,
        ......

async: false 会变魔术 :)

...但我强烈建议不要使用它，因为这是一种不好的做法。