將XML請求的結果添加到一個頁面

我想要感受一下使用XMLHTTPRequest向頁面添加內容。我想將結果添加到現有頁面內容中，比如在第二欄中，但我沒有任何運氣。我會感激在正確的方向推。謝謝你的幫助。將XML請求的結果添加到一個頁面

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    #button{ 
     float: left; 

    } 
    #team{ 
     float: left; 
    } 

</style> 
<title>XMLHTTPRequest</title> 

<script src="jquery-1.10.2.js"></script> 

<script> 
    $(document).ready(function(){ 
     xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function(){ 
      if (xhr.readyState == 4 && xhr.status == 200) { 
       xmlDoc = xhr.responseXML; 
       var team = xmlDoc.getElementsByTagName("teammember"); 
       var html = ""; 
       for (i = 0; i < team.length; i++){ 
        html += 
        xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue + "<br>" + 
        xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue + "<br>" + 
        xmlDoc.getElementsByTagName("bio")[i].childNodes[0].nodeValue + "<br><br>"; 

       } 
       //this is the code I would like help with 
       var team = document.getElementById("team"); 
       team.appendChild(document.createTextNode("html")); 
      } 
     } 
     xhr.open("GET", "team.xml", true); 

    }); 
</script> 
</head> 

<body> 

<div id="button"> 
    <button onclick="xhr.send()">Click Me!</button> 
</div> 

<div id="team"> 
</div> 
</body> 
</html>

來源

2013-10-27 MJMacarty

我寫了一個非常類似於你的腳本，幾乎完全符合你的想法。以下是我用來將所有內容放在頁面上的一些常規JavaScript，我更改了一些變量名稱，以便與代碼很好地進行比較。

for (i=0; i<team.length; i++) 
{ 

    //Create text nodes for each element as that's what appendChild() needs 
    var nameText = document.createTextNode(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue); 
    var titleText = document.createTextNode(xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue); 
    var bioText = document.createTextNode(xmlDoc.getElementsByTagName("bio")[i].childNodes[0].nodeValue); 

    //This div will contain one team member's info 
    var memberDiv = document.createElement('div'); 

    //Add text to the div created 
    memberDiv.appendChild(nameText); 
    //Line break 
    memberDiv.appendChild(document.createElement('br')); 
    memberDiv.appendChild(titleText); 
    memberDiv.appendChild(document.createElement('br')); 
    memberDiv.appendChild(bioText); 

    //Add the div we've just created to the document. 
    document.getElementById('team').appendChild(memberDiv); 
}

這可能需要一些更適應您的需求，但您得到的一般想法。這只是其中一種方式，可能還有其他一些方法，包括jQuery，實際上可能有點整齊。

您可以使用memberDiv.setAttribute('class', className)設置類中每個div到任何你想要的

下面是該代碼的可視化表示，使其更容易理解，點擊全尺寸（500 * 1750）：

來源

2013-10-27 20:15:19 frasertmay

嗯，我沒有看到你的代碼如何產生與我的不同的東西。事情是我的代碼不起作用。我已經能夠使用innerHTML獲得一些輸出，但是這會破壞已經在頁面上的內容。謝謝 – MJMacarty

@ user2925833我認爲它的工作呢？我只是添加了代碼的可視化表示，也許它會有所幫助？ – frasertmay

謝謝我使用innerHTML來使用它。感謝您的圖形，但非常有用。你是用什麼產生的？ – MJMacarty

將XML請求的結果添加到一個頁面

回答

相關問題