0

我有 java 脚本代码，我只想使用 html 在 div 中显示 xml 数据，这样我就可以使用 div 在 html 中显示 xml 数据的内容 

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "cd_catalog.xml", false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;

    document.write("<table border='1'>");
    var x = xmlDoc.getElementsByTagName("CD");
    for (i = 0; i < x.length; i++) {
        document.write("<tr><td>");
        document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
        document.write("</td><td>");
        document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    }
    document.write("</table>");
    </script>




 </head>
 <body onload="displayCD(2)">
 <div id='showCD'>
 </div>
4

4 回答 4

0

尝试这个，

<html>
<head>
<script type="text/javascript">
    function displayCD(){
    alert(1);
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            xmlDoc = xmlhttp.responseXML;
            console.log(xmlhttp.responseXML);
            var tableData = "<table border='1'>";
            var x = xmlDoc.getElementsByTagName("CD");
            for (i = 0; i < x.length; i++) {
                tableData += "<tr><td>"+x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue+"</td>";
                tableData += "<td>"+x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue+"</td></tr>";
            }
            document.getElementById('showCD').innerHTML=tableData;
        }
    }    
    xmlhttp.open("GET", "cd_catalog.xml", false);
    xmlhttp.send();
    }
</script>
</head>
<body onload="displayCD(2)">
<div id='showCD'>
</div>
</body>
</html>
于 2013-10-25T09:09:39.707 回答
0

不要使用document.write.

获取所需的 div，例如：

var the_div = document.getElementByI("showCD");

然后设置它的内容（使用 TextNode）：

var text_node = document.createTextNode(xmlDoc);
the_div.appendChild(text_node);

或者也许xmlhttp.responseText代替.responseXML. 不知道responseXML是不是标准

于 2013-10-25T09:05:53.907 回答
0

它没有那么复杂。

<body>
    <div id="showCD"></div>

    <script>

        var divCDs = document.getElementById('showCD'); 
        var List = xml.getElementsByTagName('CD');

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

            // dynamic DIV.
            var new_div = document.createElement('div');
            new_div.innerHTML = List[i].getElementsByTagName("TITLE") [0].childNodes[0].nodeValue;

            divCDs.appendChild(new_div);

       }

    </script>
</body>

检查完整的代码。

于 2014-07-17T04:36:28.800 回答
0 
    <div>
<table id="cds">
</table>
</div>
<script type="text/javascript">

    var xhr= window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.onreadystatechange= function() {
        if (this.readyState===4 || this.status===200)
            populateTable(this.responseXML);
    };
    xhr.open('GET', 'cd_catalog.xml', true);
    xhr.send();

    function populateTable(xml) {
        var table= document.getElementById('cds');
        var cds= xml.getElementsByTagName('CD');
        for (var i= 0; i<cds.length; i++) {
            var row= table.insertRow(-1);

            function getProperty(name) {
                var el= cds[i].getElementsByTagName(name)[0];
                if (el.firstChild)
                    return el.firstChild.data;
                return ''; // allow empty elements
            }
            function addCell(value) {
                row.insertCell(-1).appendChild(document.createTextNode(value));
            }

            addCell(getProperty('ARTIST'));
            addCell(getProperty('TITLE'));
        }
    };

</script>
于 2013-10-25T09:18:43.903 回答