当div内容来自Ajax调用时访问该内容时出现问题
下面是一个非常简单的原型示例。
它所做的就是，在窗口加载时，一个ajax调用将一些html添加到div中。
<html>
<head>
<script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function(){
new Ajax.Request('get-table.php', {
method: 'get',
onSuccess: function(response){
$('content').innerHTML = response.responseText;
//At this call, the div has HTML in it
click1();
},
onFailure: function(){
alert('Fail!');
}
});
//At this call, the div is empty
click1();
});
function click1(){if($('content').innerHTML){alert('Found content');}else{alert('Empty div');}}
</script>
</head>
<body><div id="content"></div></body>
</html>令人困惑的是原型理解div实际上包含了一些内容的上下文。
如果您查看ajax调用的onSuccess部分，您将看到$('content').innerHTML在其中包含了一些内容。
但是，当我在ajax调用之后检查$('content').innerHTML时，它似乎是空的。
这一定是我的一些根本性的误解。有人想跟我解释一下吗？
编辑
我只想澄清一些事情。我意识到Ajax调用是异步的。
下面是实际执行的顺序，以及为什么会让我感到困惑：
- 加载页面。
- 发出了get-table.php的Ajax请求。
- 调用onSuccess内部的click1()。我看到了div有内容的警报。
- 在Ajax调用之后调用click1()。我看到一个警报，显示div是空的。
因此，这就像代码按照编写的顺序执行一样，但是DOM不是按照相同的顺序更新的。
编辑2，所以简单的回答是，将代码放在onSuccess中是正确的。
另一个需要考虑的情况是执行Ajax调用，然后从第一个调用的onSuccess执行另一个Ajax调用，如下所示：
new Ajax.Request('foo.php',{
method: 'get',
onSuccess: function(response){
doAnotherAjaxCall();
}
});
function doAnotherAjaxCall(){
new Ajax.Request('foo.php',{
method: 'get',
onSuccess: function(response){
//Anything that needs to happen AFTER the call to doAnotherAjaxCall() above
//needs to happen here!
}
});
}回答 4
Stack Overflow用户
发布于 2008-09-16 18:08:21
AJAX的第一个字母表示“异步”。这意味着AJAX调用是在后台执行的，即AJAX请求调用立即返回。这意味着代码通常在onSuccess处理程序被调用之前(甚至在AJAX请求完成之前)实际执行。
考虑到您编辑的问题:在某些浏览器(例如Firefox)中，警报框并不像您想象的那样有模式。即使已经打开另一个警告框，异步代码也可能弹出警报框。在这种情况下，较新的警报框(来自异步代码的警告框)将显示在旧的警告框的顶部。这就产生了异步代码首先被执行的错觉。
Stack Overflow用户
发布于 2008-09-16 18:09:03
没有尝试您的代码: AJAX调用是异步执行的。这意味着您的Ajax.Request触发，然后继续到click1()调用，该调用告诉您div是空的。在此之后，Ajax请求完成，内容实际上被放入div中。此时，onSuccess函数将被执行，您将得到所期望的内容。
Stack Overflow用户
发布于 2008-09-16 18:11:16
这是Ajax调用，它是异步的。这意味着在请求调用之后，响应还没有恢复，这就是为什么$('content')仍然是空的。
https://stackoverflow.com/questions/75181
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号