javascript를 통해 XML의 모든 데이터 가져 오기

Question

ajax/javascript를 사용하여 모든 게시물을 스풀링하고 각 게시물의 모든 댓글을 DB에서 가져 오려고합니다.

DB에서 아약스를 통해 실제 데이터를 받고 있지만 XML 노드를 가져 와서 div 컨테이너에 표시하는 데 문제가 있습니다.

표시되는 데이터가 잘못되었습니다. 즉 게시물에 두 개 이상의 의견이있는 경우 하나의 의견 만 표시되며 게시물에 의견이 없으면 다른 모든 게시물이 표시되지 않습니다.

각 게시물에 대한 모든 의견을 얻으려고 시도하는 동안 첫 루프 내에서 다른 for 루프를 만들었지 만 정확한 childNode를 지정하여 루프를 실행하도록 지정 했으므로 방금 설명한대로 시도해 보았습니다. 아래 자바 스크립트.

이 문제를 해결하는 데 도움이 필요하며 xml 노드와 어떻게 작동하는지와 관련이 있습니다.

다음은 XML 구조의 샘플입니다 :

<script> 

var getStatusPost = XmlHttpRequestObject(); 
var mTimer; 



function fetchAllData() { 
    getStatusPostFunc(); 
} 

// Checking if XMLHttpRequest object exist in user browser 
function XmlHttpRequestObject(){ 
if(window.XMLHttpRequest){ 
    return new XMLHttpRequest(); 
} 
else if(window.ActiveXObject){ 
    return new ActiveXObject("Microsoft.XMLHTTP"); 
} else{ 
     document.getElementById("ajax_status").innerHTML = "Status: Unable to launch Chat Object. Consider upgrading your browser."; 
} 
} 




// Fetch all post 
function getStatusPostFunc(){ 
     getStatusPost.open("GET", "inc/status_post_processor.php?all_post&t=" + Math.random(), true); 
     getStatusPost.onreadystatechange = statusPostReceivedHandler; 
     getStatusPost.timeout = 20000; //set timeout for xmlhttp request 
     getStatusPost.ontimeout = statusPostTimeoutHandler; 
     getStatusPost.send(null); 
} 

// Handle timeout for fetching post 
function statusPostTimeoutHandler(){ 
     getStatusPost.abort(); //abort the timedout xmlhttprequest 
     setTimeout(function(){getStatusPostFunc()}, 20000); 
} 


// Receives response from server for all post and comment 
function statusPostReceivedHandler(){ 

    if(getStatusPost.readyState == 4){ 
     if(getStatusPost.status == 200){ 

      var post_holder_div = document.getElementById('status_update_msg_area'); 
      post_holder_div.innerHTML = '';    

      var xmldoc = getStatusPost.responseXML; 
      var postNode = xmldoc.getElementsByTagName("post_unit"); 
      for(i = 0; i < postNode.length; i++){ 

       post_holder_div.innerHTML += '<p><strong>Poster name:</strong> ' + postNode[i].getAttribute("poster_name") + '</p>'; 

       post_holder_div.innerHTML += '<p><strong>Post:</strong> ' + postNode[i].getAttribute("post_msg") + '</p>'; 

       post_holder_div.innerHTML += '<br><h3>Comments</h3><br>'; 

       post_holder_div.innerHTML += '<p>' + postNode[i].childNodes[0].getAttribute("com_name") + ': <em>' + postNode[i].childNodes[0].getAttribute("com_msg") + '</em></p>'; 

       post_holder_div.innerHTML += '<br /><hr /><br />' 

      }  

     } 
    } 

} 

</script> 

는 만족이 도움을 받고 감사하겠습니다 : 여기

<post> 

<post_unit poster_pix="john_doe.jpg" poster_name="john doe" poster_acctype="user" post_time="12:12 pm, Jul 5 2013" post_msg="Not so cool" post_img="post_img.jpg"> 

<comment com_name="ben tyler" com_acctype="admin" com_time="10:12 am, Jul 6 2013" com_msg="how about now"> 
</comment> 

<comment com_name="thelma jones" com_acctype="supervisor" com_time="02:12 pm, Jul 6 2013" com_msg="okay"> 
</comment> 

</post_unit> 


<post_unit poster_pix="tom_hay.jpg" poster_name="Tom hayden" poster_acctype="user" post_time="12:12 pm, Jul 5 2013" post_msg="it aint working" post_img="post_img.jpg"> 

</post_unit> 

</post> 

는 자바 스크립트입니다.

Answer 1

var post_holder_div = document.getElementById('status_update_msg_area'); 
post_holder_div.innerHTML = ''; 

var posts = xmlDom.getElementsByTagName("post"), domString = ''; 
for (var i = 0; i < posts.length; i++) { 
    var poster = posts[i].getElementsByTagName('author')[0].childNodes[0].textContent, 
     message = posts[i].getElementsByTagName('msg')[0].textContent, 
     time = posts[i].getElementsByTagName('time')[0].textContent, 
     comments = posts[i].getElementsByTagName('comments')[0].childNodes; 

    domString += '<p><strong>Poster name:</strong> ' + poster + '</p>'; 
    domString += '<p><strong>Post:</strong> ' + message + '</p>'; 

    if (comments.length) { 

     domString += '<h4>Comments</h4>'; 

     for (var j = 0; j < comments.length; j++) { 
      var commenter = comments[j].getElementsByTagName('author')[0].childNodes[0].textContent, 
       comment = comments[j].getElementsByTagName('content')[0].textContent; 

      domString += '<p>' + commenter + ': <em>' + comment + '</em></p>'; 

     } 
    } 

} 

post_holder_div.innerHTML = domString; 

이 당신에게 제공한다 ... 나는 ... 당신이 이런 일에 XML 구조를 변경할 수 있습니다

<posts> 
    <post> 
     <author> 
      <name>John Doe</name> 
      <acctype>Admin</acctype> 
     </author> 
     <time>09/07/2013</time> 
     <msg>This is a message</msg> 
     <img> 
      <url>post_img.jpg</url> 
     </img> 
     <comments> 
      <comment> 
       <author> 
        <name>John Smith</name> 
        <acctype>basic</acctype> 
       </author> 
       <time>09/07/2013</time> 
       <content>comment number 1</content> 
      </comment> 
      <comment> 
       <author> 
        <name>Jane Doe</name> 
        <acctype>basic</acctype> 
       </author> 
       <time>09/07/2013</time> 
       <content>comment number 1</content> 
      </comment> 
     </comments> 
    </post> 
    <post> 
     ...... 
    <post> 
</posts> 

을 생각하고 다음과 같이 당신은 자바 스크립트를 가질 수 있습니다 대략적인 아이디어. 댓글을 달고 싶다면 을 하위 파일로 <comments/>으로 중첩시켜야합니다. to is to to

NB : 물론 JS 코드는 리팩토링 될 수 있고 더 깔끔하지 않을 수 있지만 이것은 단지 당신을 도울뿐입니다.

이 도움이 되길 바랍니다.