3

我正在使用 javascript / ajax 开发一个 Web 应用程序。

问题是在我的应用程序（一种社交网络）中，我需要阅读有关用户的信息（数据库中的帖子）。为此，我使用 PHP 专用服务与数据库交互。该服务返回主页格式的 HTML。

现在，我将此服务与 AJAX 调用一起使用，以将 HTML 导入到我的页面中。问题是，当我尝试使用 javascript 从注入的 HTML 中获取元素时：

document.getElementById('commentsArea_xxx').innerHTML=xmlhttp.responseText;

getElementById返回null。

我认为问题是在 AJAX 调用之后浏览器没有更新文档，因此文档中不存在“commentsArea_xxx”！

我该如何解决这个问题？

这是我的代码：

function moreComments(id){
        var footerIcon = document.getElementById('footer');
            footerIcon.innerHTML="<div style='text-align:center;'><img src='images/home_selected.png' onClick='loadHome()'/><img id='cameraButton' src='images/camera.png'/><img src='images/list.png' onClick='loadMyVideo()'/></div>";
            pageOld=pageCurrent;
            pageCurrent=0;
            document.getElementById("ajaxContent").innerHTML="<div id='wrapper' style='top:95px;'><div id='scroller'><ul id='thelist'><li style='text-align:center;'><img src='images/loading.gif' style='text-align:center;'></li></ul></div></div>";
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("commentsArea_"+id).innerHTML=xmlhttp.responseText;
                    loaded();
                    me();
                    setTimeout(function () {myScroll.refresh();}, 0);
                }
            }
            xmlhttp.open("GET","home_more.php?id="+id,true);
            xmlhttp.send();
    }
4

3 回答 3

5

这应该这样做：

$('body').ajaxComplete(function () {
        document.getElementById('commentsArea_xxx').innerHTML=xmlhttp.responseText;
 });

这将在每次 ajax 调用之后执行。

更新： 如果您尚未将元素添加到 DOM，请查看@TJ Crowder 的回答。

于 2012-11-24T09:39:01.257 回答
4

我认为问题在于，在 ajax 调用后没有更新文档，因此文档中不存在“commentsArea_xxx”！！！

正确的。ajax 调用所做的只是将数据带到您的代码中，在xmlhttp.responseText属性上。您可以将其添加到文档中。您可以通过设置innerHTML现有元素的 ，或通过创建元素并通过/ / 等document.createElement将它们附加到文档来做到这一点。Element#appendChildElement#insertBefore

查看各种DOM 规范以获取详细信息。HTML5 规范也有这方面的一些信息。

FWIW，在像jQuery、YUI、Closure或其他任何一个好的库中都有很多实用程序功能和浏览器差异平滑。利用人们在这些库中投入的辛勤工作，您可以专注于为特定的增值编写代码。

于 2012-11-24T09:00:11.303 回答
0

正如您所说的那样，问题是：... ajax 调用不会更新文档...相反，在通过 AJAX 检索 php 文件的调用之后的 javascript 发生在 DOM 有机会刷新之前。然而，setTimeout() 表现得很好，因为它给了 DOM 一点时间来刷新，然后你可以将任何尾随的 javascript 代码放在 setTimeout 函数中。至少它适用于 IE 11、FF 28、Chrome 33 和 Opera 11。9 毫秒的延迟对我有用。因此，我建议您将 AJAX 调用之后的任何 javascript 放在 setTimeout() 函数中：

setTimeout(function(){
// Your Code here
    var aVariable = document.getElementById("idRenderedFromAJAX");
}, 9);

另一件事是让 xmlhttp.responseText 在进行 AJAX 调用之前将其值返回给已经连接到 DOM 的 javascript 变量。然后，通过调用呈现的任何 HTML 都可以通过刷新的 DOM 访问，例如，使用 setTimeout 函数放置的代码中的 getElementById。只是一个建议，因为这种替代方法不需要 jquery，并且似乎不会在网络上四处流传。

于 2014-05-12T00:36:27.373 回答