0

ajax/javascript を使用して、DB からすべての投稿と各投稿のすべてのコメントをスプールしようとしています。

ajax を介して DB から実際のデータを正しく取得していますが、xml ノードをフェッチして div コンテナーに表示する際に問題があります。

表示されているデータが正しくありません。つまり、投稿に複数のコメントがある場合は 1 つだけ表示され、投稿にコメントがない場合は 1 つおきの投稿が表示されるわけではありません。

各投稿のすべてのコメントを取得しようとしているときに、最初のループ内に別の for ループを作成しましたが、ループを実行するための正しい childNode を指定してスタックしたため、以下の JavaScript に示すように試してみました。

これを修正するのに助けが必要です.xmlノードの操作方法に関係していると確信しています.

xml 構造のサンプルを次に示します。

<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>

これがJavaScriptです：

<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>

これについて助けていただければ幸いです。

4

1 に答える 1

0

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>

そして、次のようにJavaScriptを使用できます...

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;

これで大まかなアイデアが得られるはずです。コメントを入れ子にしたい場合、つまり<comment/>のサブチャイルドとして使用し<comments/>ます。そのままです

注意: もちろん、JS コードをリファクタリングしてよりきれいにすることもできますが、これは途中で役立つだけです。

これが役立つことを願っています:)

于 2013-07-09T16:32:14.733 に答える