当内容来自 Ajax 调用时访问 div 内容时出现问题

StackOverflow https://stackoverflow.com/questions/75181

  •  09-06-2019
  •  | 
  •  

题

这是一个非常简单的原型示例。

它所做的只是在窗口加载时进行 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>

令人困惑的是 Prototype 理解 div 中实际上有东西的上下文。

如果您查看 ajax 调用的 onSuccess 部分，您会发现此时 $('content').innerHTML 中有内容。

但是，当我在 ajax 调用后立即检查 $('content').innerHTML 时，它似乎是空的。

这一定是我的一些根本性误解。有人愿意向我解释一下吗？

编辑
我只是想澄清一些事情。我意识到 Ajax 调用是异步的。

这是事情执行的实际顺序以及为什么它让我感到困惑：

  1. 页面加载。
  2. 向 get-table.php 发出 Ajax 请求。
  3. 在 onSuccess 内部调用 click1() 。我看到一条警告，表明该 div 有内容。
  4. 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!
    }
  });
}

});

有帮助吗？

解决方案

AJAX的第一个字母代表“异步”。这意味着 AJAX 调用是在后台执行的，即AJAX 请求调用 立即返回. 。这意味着正常情况下立即执行的代码 前 onSuccess 处理程序被调用（甚至在 AJAX 请求完成之前）。

考虑到您编辑的问题：在某些浏览器中（例如Firefox），警报框并不像您想象的那样模式化。即使另一个警告框已经打开，异步代码也可能会弹出警告框。在这种情况下，较新的警报框（来自异步代码的警报框）将显示在旧警报框的顶部。这会造成异步代码首先执行的错觉。

其他提示

没有尝试过你的代码：AJAX 调用是异步执行的。这意味着您的 Ajax.Request 会触发，然后继续调用 click1() ，告诉您 div 为空。在 Ajax 请求完成之后的某个时刻，内容实际上已放入 div 中。此时onSuccess函数被执行，你就得到了你想要的内容。

这是 Ajax 调用，它是异步的。这意味着在请求调用之后，响应尚未返回，这就是 $('content') 仍然为空的原因。

您为处理 AJAX 调用而进行的函数调用的 onSuccess 元素将在您收到来自 get-table.php 的响应时执行。这是一个单独的 Javascript 函数，当您从 get-table.php 获得答案时，您将告诉浏览器调用该函数。一旦进行 AJAX.Request 调用，就会访问 AJAX.Request 调用下面的代码，但不一定在调用 get-table.php 之前。所以，是的，我认为对 AJAX 的工作原理存在一些根本性的误解，可能是由于使用库来隐藏细节。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top