使用Ajax將內容加載到div中

Question

我正在使用ajax javascript將view_login.php中的內容加載到index.php的div id="display"

var hr=new XMLHttpRequest();
hr.open("GET", 'view_login.php', true);
hr.onreadystatechange = function(){
    if(hr.readyState == 4 && hr.status == 200){
        var return_data = hr.responseText;
        document.getElementById('display').innerHTML = return_data;
    }
}
hr.send();

而不是echo $output我只會針對div本身。

PHP / HTML

$output = '
<div id="visible">
<form>
<input type="text" name="name"/>
<input type="submit" />
</form>
</div>';

echo $output;

是否可以僅將div visible且其內容作為目標，而不是頁面上的每個輸出？ 而不使用jQuery，而只是簡單/原始的JavaScript。

Answer 1

有幾種使用普通JavaScript進行此操作的方法。 一種方法是將HTML附加到Document Fragment ，這是一個單獨的文檔，然后在其上使用querySelector僅僅拉出所需的div。

演示

var frag = document.createDocumentFragment();
var div = document.createElement('div'); // create a div to contain the HTML
div.innerHTML = return_data; // insert HTML to the div
frag.appendChild(div); // append the div to the document fragment

var visibleDiv = frag.querySelector("#visible"); // find the #visible div

// append the div to the main document
document.getElementById('display').appendChild(visibleDiv);

其他選項是：

• DOMParser （受IE9 +支持）。
• 將它作為div追加到主文檔中，但是您需要確保它在視圖中是隱藏的，然后獲取div並將其刪除。