页面刷新后出现TypeError: oModel.responseJSON未定义问题求助

这个错误的核心原因是你把jQuery的$.ajax()返回的Deferred对象直接当成了同步的响应结果来用，完全忽略了AJAX请求的异步特性。

• $.ajax()不会立即返回请求的响应数据，它返回的是一个Deferred（Promise）对象，只有当请求成功完成后，这个对象才会被填充responseJSON这类响应相关的属性。
• 页面的onload事件触发时，你的AJAX请求大概率还在后台和服务器交互，此时oModel.responseJSON还未被赋值，自然会抛出undefined的错误。而后来你在控制台能拿到值，是因为此时请求已经完成，对象属性已经被填充了。

最优修正方案 #

你需要把displayEntries的调用放到AJAX请求的成功回调里，彻底抛弃依赖body的onload事件的逻辑，同时还要修复代码里的小笔误（比如拼接的变量html被写成了txt）：

修正后的user.js代码：

'use strict'; // 保留严格模式
$.ajax({
  url: 'data.php',
  dataType: 'json'
}).done(function(response) {
  // 请求成功后再调用渲染函数
  displayEntries(response.results);
});

function displayEntries(entries) {
  $("#div").empty();
  jQuery.each(entries, function(i, entry) {
    let html = '<div id="cid-' + i + '" class="entry">' + entry.name + '</div>';
    $("#div").append(html); // 修正之前的变量名错误
  });
}

同时记得把body标签里的onload="displayEntries(oModel.responseJSON.results);"删掉，现在我们已经通过AJAX的回调来触发页面渲染了。

备选方案（不推荐） #

如果你一定要保留onload的触发逻辑，可以通过轮询等待AJAX完成，但这种方式不够优雅，仅作参考：

'use strict';
let responseData;
$.ajax({
  url: 'data.php',
  dataType: 'json'
}).done(function(response) {
  responseData = response;
});

function displayEntries() {
  if (!responseData) {
    // 请求未完成，延迟100ms重试
    setTimeout(displayEntries, 100);
    return;
  }
  $("#div").empty();
  jQuery.each(responseData.results, function(i, entry) {
    let html = '<div id="cid-' + i + '" class="entry">' + entry.name + '</div>';
    $("#div").append(html);
  });
}

对应的body标签改成onload="displayEntries();"即可，但还是优先推荐第一种回调方案，逻辑更清晰、性能更优。

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