为什么会出现这个错误："Uncaught TypeError: Cannot read property 'Title' of undefined"?

Question

我正在尝试编写一个 Ajax 网络应用程序。我有一个函数，它应该请求一个 JSON 对象，然后用它来重新/填充网站。

以下是相关的 Javascript 代码（第8-16行）：

window.onload=LoadData("Home", {});
var _doc = {};
function LoadData(page, params) {
    $.get(page, params, function ( data ) { 
        _doc = jQuery.parseJSON( data ); 
        }
    );
    document.title = _doc.Title.Title;
};

这里是Chrome给出的错误信息：

Uncaught TypeError: Cannot read property 'Title' of undefined
LoadDatahttp://127.0.0.1/:15
(anonymous function)

如果我在控制台中运行相同的语句，这就让我感到困惑：

document.title = _doc.Title.Title;
"Home"

它将标题更改为“首页”。

这里有证据表明它不是未定义的：

_doc
Object
   Body: Object
      Menus: Array[4]
         0: Object
            Menu: Object
         1: Object
            Menu: Object
         2: Object
            Menu: Object
         3: Object
            Menu: Object
   Title: Object
      Title: "Home"
   User: Object
      Name: "Username"

以下是Chrome控制台的截图： 注意：底部对函数的调用确实改变了标题

- user684970

Answer 1

您只能在回调函数中访问来自AJAX请求的数据：

window.onload=LoadData("Home", {});
var _doc = {};
function LoadData(page, params) {
    $.get(page, params, function ( data ) { 
          _doc = jQuery.parseJSON( data ); 
          document.title = _doc.Title.Title;
        }
    ));
};

AJAX请求（异步JavaScript和XML）是异步的；浏览器会发起请求，但不会等待响应...相反，JavaScript执行会继续。稍后，当AJAX请求的HTTP请求完成时，您提供的回调函数将被调用，并可以访问HTTP响应中包含的数据。

在您的情况下，document.title = _doc.Title.Title;在AJAX请求被派发后立即执行（即在上述“稍后”的时间之前）；所以回调函数_doc = jQuery.parseJSON(data); 尚未触发，因此 _doc仍然是一个空对象，所以_doc.Title是未定义的，尝试从未定义的_doc.Title检索Title会导致错误。

与您的问题无关，但FYI，您可能需要查看jQuery.getJSON方法;这个方法与jQuery.get方法的区别在于，传递给您的响应对象将已经是JSON对象（因此您不需要调用jQuery.parseJSON）。

- Matt

Answer 2

你的$.get()函数是异步的。这意味着当你调用它时，你所做的只是启动 ajax 调用的执行。因此，紧随其后的那一行：

document.title = _doc.Title.Title;

在 AJAX 调用完成之前就执行了。你只有在其完成函数中才知道 AJAX 调用已完成。

要修复这个问题，把对 _doc 的引用放到 AJAX 完成函数中：

window.onload=LoadData("Home", {});
var _doc = {};
function LoadData(page, params) {
    $.get(page, params, function ( data ) { 
        _doc = jQuery.parseJSON( data ); 
        document.title = _doc.Title.Title;
        }
    );
};

- jfriend00