Javascript 如何从ajax调用中检索元素_Javascript_Php_Ajax

Javascript 如何从ajax调用中检索元素

javascript php ajax

Javascript 如何从ajax调用中检索元素,javascript,php,ajax,Javascript,Php,Ajax,我想从ajax调用中检索所有元素，然后将它们插入到另一个元素中，而不需要：使用jquery（我只想使用纯JavaScript）创建新元素以包含ajax响应以下是我尝试过的： index.php <!DOCTYPE HTML> <head> <script type="text/javascript"> function loadPage() { var ajax

我想从ajax调用中检索所有元素，然后将它们插入到另一个元素中，而不需要：

使用jquery（我只想使用纯JavaScript）
创建新元素以包含ajax响应

以下是我尝试过的：

index.php

<!DOCTYPE HTML>    
    <head>
        <script type="text/javascript">

            function loadPage() {
                var ajax = new XMLHttpRequest();
                ajax.open('GET', 'test.php', true);
                ajax.onreadystatechange = function (){
                    if(ajax.readyState === 4 && ajax.status === 200){
                        document.getElementById('output').appendChild( ajax.responseText ) ; 
                    }  
                };
                ajax.send();
                }

                loadPage();
        </script>
    </head>
    <body>
        <div id="output">
            <h1>Default</h1>
        </div>
    </body>
    </html>

<h1>
     its work
</h1>

<div>
    <h2>
        its work2
    </h2>
</div>


函数loadPage（）{
var ajax=new-XMLHttpRequest（）；
open（'GET'，'test.php'，true）；
ajax.onreadystatechange=函数（）{
if（ajax.readyState==4&&ajax.status==200）{
document.getElementById（'output'）.appendChild（ajax.responseText）；
}  
};
ajax.send（）；
}
loadPage（）；
违约

test.php

<!DOCTYPE HTML>    
    <head>
        <script type="text/javascript">

            function loadPage() {
                var ajax = new XMLHttpRequest();
                ajax.open('GET', 'test.php', true);
                ajax.onreadystatechange = function (){
                    if(ajax.readyState === 4 && ajax.status === 200){
                        document.getElementById('output').appendChild( ajax.responseText ) ; 
                    }  
                };
                ajax.send();
                }

                loadPage();
        </script>
    </head>
    <body>
        <div id="output">
            <h1>Default</h1>
        </div>
    </body>
    </html>

<h1>
     its work
</h1>

<div>
    <h2>
        its work2
    </h2>
</div>


它的工作
它的工作2

我已经在谷歌上搜索过了，但答案总是使用jQuery。

节点。appendChild

需要一个

节点

对象作为参数。您从test.php获得的是一个字符串。尝试改用

innerHTML

document.getElementById('output').innerHTML = ajax.responseText;

从XHR级别2开始，您只需将

onload

处理程序附加到

XHR

，而无需检查

readyState

和

状态

属性

ajax.onload = function() {
    document.getElementById('output').innerHTML += this.responseText;
}

Node.appendChild

需要一个

Node

对象作为参数。您从test.php获得的是一个字符串。尝试改用

innerHTML

document.getElementById('output').innerHTML = ajax.responseText;

从XHR级别2开始，您只需将

onload

处理程序附加到

XHR

，而无需检查

readyState

和

状态

属性

ajax.onload = function() {
    document.getElementById('output').innerHTML += this.responseText;
}

你看过这个吗

我认为您发现的大多数示例都使用jquery，因为jquery使它能够跨浏览器运行

，您看过这个吗

我认为您发现的大多数示例都使用jquery，因为jquery使它能够跨浏览器运行

   function loadPage(){ 
var strURL="test.php";

var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) { 
document.getElementById('output').value=req.responseText; 
    } else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
} 
} 
req.open("POST", strURL, true);
req.send(null);
} 

}



 function getXMLHTTP() { //function to return the xml http object
    var xmlhttp = false;
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e1) {
                xmlhttp = false;
            }
        }
    }

试试这个

   function loadPage(){ 
var strURL="test.php";

var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) { 
document.getElementById('output').value=req.responseText; 
    } else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
} 
} 
req.open("POST", strURL, true);
req.send(null);
} 

}



 function getXMLHTTP() { //function to return the xml http object
    var xmlhttp = false;
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e1) {
                xmlhttp = false;
            }
        }
    }

在javascript中创建的每个元素都返回对该节点的引用。但是在ajax调用期间，没有引用。因此，您不能使用appendChild，而应该使用document.getElementById（'output'）。innerHTML=ajax.responseText；我不想删除元素中的默认标记在javascript中创建的每个元素都返回对该节点的引用。但是在ajax调用期间，没有引用。因此，您不能使用appendChild，而应该使用document.getElementById（'output'）。innerHTML=ajax.responseText；我不想删除该元素中的标记默认值我不想删除该div中的标记默认值您可以使用

+=

将现有的

innerHTML

与新内容连接起来。我已经更新了我的帖子。我不想删除该div中的默认标记。您可以使用

+=

将现有的

innerHTML

与新内容连接起来。我已经更新了我的帖子。