Question

我正在使用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();
    }

Answer 1

我认为问题是ajax调用后没有更新文档，因此文档中不存在'commentsArea_xxx'!!!

右。所有ajax调用都会将数据带到xmlhttp.responseText属性上的代码中。您可以将其添加到文档中。您可以通过设置现有元素的innerHTML，或通过document.createElement创建元素并通过Element#appendChild / Element#insertBefore /等将其附加到文档来实现。

查看各种DOM specs了解详情。 HTML5规范也有some information。

FWIW，有一个很多的实用功能和浏览器差异平滑功能可用于jQuery，YUI，Closure或{ {3}}。利用人们为这些库添加的辛勤工作，您可以专注于为特定的增值编写代码。

Answer 2

这应该这样做：

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

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

<强>更新如果你还没有将元素添加到DOM，请通过@ T.J Crowder的回答。

Answer 3

问题在于您声明：... ajax调用不会更新文档...而是，在通过AJAX检索php文件的调用之后，javascript会在DOM有机会刷新之前发生。但是，setTimeout（）表现得很好，因为它为DOM提供了一点刷新时间，然后你可以在setTimeout函数中放置任何尾随的javascript代码。至少它适用于IE 11，FF 28，Chrome 33和Opera 11.延迟9毫秒对我有用。所以我建议你在setTimeout（）函数中放置任何跟随AJAX调用的javascript：

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

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

ajax调用后，getElementById不起作用

3 个答案: