如何正确访问jQuery Ajax请求的responseText属性？

嘿，这个问题我之前踩过一模一样的坑！核心原因根本不是语法问题，而是AJAX的「异步特性」在搞鬼～

问题出在哪？ #

你写的var getTemplateCall = $.ajax(...)确实会返回一个jqXHR对象，但这个对象的responseText属性只有在AJAX请求完全完成后才会被服务器返回的数据填充。

你现在的写法是：

var getTemplateCall = $.ajax({ url: url, type: type, data: data });
console.log(getTemplateCall); // 控制台能看到responseText
console.log(getTemplateCall.responseText); // 却返回undefined

这是因为控制台是「惰性求值」的——当你在控制台里展开这个jqXHR对象的时候，AJAX请求已经完成了，所以能看到填充后的responseText；但你代码里紧接着调用console.log(getTemplateCall.responseText)时，请求还在后台跑，属性还没被赋值，自然就是undefined。

正确的访问方式 #

你得等到AJAX请求完成后再去访问响应数据，这里有几种常用的写法：

1. 使用jQuery的done()回调（最推荐的标准写法）

var getTemplateCall = $.ajax({ url: url, type: type, data: data });
// 当请求成功完成时，执行这个回调函数
getTemplateCall.done(function(responseData) {
  // 这里可以直接拿到响应内容，jQuery会自动帮你解析JSON格式的响应
  console.log(responseData);
  // 此时也能直接访问jqXHR的responseText
  console.log(getTemplateCall.responseText);
});

2. 强制同步请求（不推荐，慎用）

如果一定要在AJAX调用后立即拿到结果，可以把请求设为同步，但这会阻塞浏览器，导致页面卡住，用户体验很差，而且现在很多浏览器对同步AJAX有严格限制：

var getTemplateCall = $.ajax({ 
  url: url, 
  type: type, 
  data: data,
  async: false // 强制同步，请求完成后才会继续执行后续代码
});
console.log(getTemplateCall.responseText); // 这时候就能拿到值了

3. 用ES6的async/await（现代环境推荐）

如果你的项目支持ES6+语法，可以用async/await让异步代码看起来像同步代码：

async function fetchTemplate() {
  // await会等待AJAX请求完成，再继续执行
  var getTemplateCall = await $.ajax({ url: url, type: type, data: data });
  console.log(getTemplateCall.responseText);
}
// 调用这个异步函数
fetchTemplate();

总结 #

你的语法完全没问题，只是没搞懂AJAX的异步逻辑——永远不要在AJAX调用后立即访问响应属性，一定要在请求完成的回调（或者await之后）里处理响应数据。

内容的提问来源于stack exchange，提问作者David H