Question

关于jQuery和Ajax的问题，我有点困惑。

脚本开始：

 $(document).ready(function () {
        var page = 'index';
        displayContent(page)
});

displayContent包含用于获取文本内容的ajax调用，并将其推送到“#textCotnent”div中。

如果在我警告的函数（$（'＃textContent'）。text（））中，它会提醒文本。

function displayContent(page) {
        $.ajax(//ajax stuff goes here and works fine);
        alert($('#textContent').text()) //alerts the text, hooray.
}

但是，如果我执行以下操作：

$(document).ready(function () {
        var page = 'index';
        displayContent(page)
        alert($('#textContent').text()); //alerts a blank box, boo.
});

根据ajax调用显示文本，但警告弹出null。

我认为$（'＃textContent'）无论你在脚本中调用它的位置都会没问题，但似乎并非如此。

我对jQuery没有什么了解？

Answer 1

ajax调用正在异步完成。您必须等到$.ajax的回调函数才能从调用中操作/访问DOM。我对原始结构的工作感到惊讶。您应该使用以下结构：

 function displayContent(page) {
   $.ajax(/* ajax parameters */).complete(function() {
     alert($('#textContent').text()) //alerts the text, hooray.
   });
 }

以这种方式思考：$.ajax函数立即返回（2-3毫秒）并且代码继续运行。对服务器的命中需要大约100毫秒。因此，你正在跳枪，需要等到ajax完成才能玩结果。这有意义吗？

Answer 2

Ajax调用是异步的（大部分时间），因此，警报在ajax调用启动之后但在ajax调用返回答案之前发生。

代码的时间表：

displayContent(page);
$.ajax(etc...); //Ajax call is sent
alert($('#textcontent').text()); // At this point, your #textcontent element is empty
//Sometimes later, the ajax call returns

Answer 3

AJAX调用是异步的。因此，在发送AJAX请求时，其余代码将执行。

一旦AJAX请求完成，您需要调用该函数，就像您在第一个示例中所做的那样。

jQuery＆amp;范围 - 函数外的$（'＃elements'）

3 个答案: