Question

我正在尝试包含XML数据库中的密钥。到目前为止，我知道我从console.log中正确地得到它们，但是为了用HTML显示，我创建了一个变量，但我不知道如何在变量中包含其他键：（

  var request;
    if (window.XMLHttpRequest){
     request=new XMLHttpRequest();    
     } else{
     request=new
    ActiveXObject("Microsoft.XMLHTTP");
     }
     request.open('GET', 'song_catalog.xml');
     request.onreadystatechange=function(){
     if((request.readyState===4)&&(request.status===200)){

    console.log(request.responseXML.getElementsByTagName('ArtistName')
            [0].firstChild.nodeValue);
    console.log(request.responseXML.getElementsByTagName('SongName')
            [0].firstChild.nodeValue);
    console.log(request.responseXML.getElementsByTagName('SongDuration')
            [0].firstChild.nodeValue);
    console.log(request.responseXML.getElementsByTagName('AlbumName')
            [0].firstChild.nodeValue);
    console.log(request.responseXML.getElementsByTagName('AlbumYear')
            [0].firstChild.nodeValue);

这里我应该在变量调用“items”中包含键，但现在我只有'ArtistName'，那么如何在变量中包含其他键？

     var items=
        request.responseXML.getElementsByTagName
        ('ArtistName');

    var output = '<ul>';
        for (var i=0; i<items.length;i++){ 
           output += '<li>' + items[i].firstChild.nodeValue+'</li>';
           }
        output+='</ul>';
        document.getElementById('musicList').innerHTML= output;         
       }
      }

     request.send();

Answer 1

您应该做的是获取包含所有这些值的父标记。您没有显示实际的XML，但假设您有类似

的内容

<song>
   <ArtistName>...</ArtistName>
   <SongName>...</SongName>
   etc...
</song>

然后你最好获得<song>标签，并对其他值进行子树搜索：

var songs = request.responseXML.getElementsByTagName('song');
for (song in songs) {
     artistname = song.getElementsByTagName('ArtistName')[0].nodeValue;
     songname = song.getElementsByTagName('song')[0].nodeValue;
     etc...
}

Answer 2

添加更多循环，创建真实元素，并将其全部追加到最后

var tags   = ['ArtistName', 'SongName', 'SongDuration', 'AlbumName', 'AlbumYear'],
    items  = [],
    output = document.createDocumentFragment();

for (var i=0; i<tags.length; i++) {
    items.push( request.responseXML.getElementsByTagName( tags[i] ) );
}

for (var i=0; i<items[0].length;i++){ 
    var ul = document.createElement('ul')
    for (var j=0; j<tags.length; j++) {
        var li  = document.createElement('li'),
            txt = document.createTextNode( items[i][j].firstChild.nodeValue );

        li.appendChild(txt);
        ul.appendChild(li);
    }
    output.appendChild(ul);
}

var list = document.getElementById('musicList');

list.innerHTML = '';
list.appendChild(output);

Answer 3

最后，我设法使用以下内容从密钥中获取所有值：

function loadXMLFromFile(url){
        var xmlhttp;
        var htmlTable, Songs, nodeVar,i;
        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){

                // Create Table and Table Headers for Displaying Data
                htmlTable="<table border='1'><tr><th>Title</th><th>Artist</th>                <th>Album</th><th>Year</th><th>Track</th></tr>";
                //Get array of songs from responseXML

                Songs=xmlhttp.responseXML.documentElement.getElementsByTagName("Song");
                // Loop through songs array and extract elements using       getElementsByTagName()
                for (i = 0;i < Songs.length; i++){
                       htmlTable=htmlTable + "<tr>"; //Append opening <tr>
                       // For each song, get the SongName and put it in the table using <td>
                       // Use Try/Catch to ensure that if there is not data, empty <td></td> are used instead
                       nodeVar=Songs[i].getElementsByTagName("SongName");
                       try{
                            htmlTable=htmlTable + "<td>" + nodeVar[0].firstChild.nodeValue + "</td>";
                        }
                        catch (er){
                            htmlTable=htmlTable + "<td> </td>";
                        }
                        // For each song, get the ArtistName and put it in the table using <td>
                        // Use Try/Catch to ensure that if there is not data, empty <td></td> are used instead

                        nodeVar=Songs[i].getElementsByTagName("ArtistName");
                        try{
                            htmlTable=htmlTable + "<td>" + nodeVar[0].firstChild.nodeValue + "</td>";
                        }
                        catch (er){
                            htmlTable=htmlTable + "<td> </td>";
                        }

                        //Loop Value for Album Name 
                             nodeVar=Songs[i].getElementsByTagName("AlbumName");
                        try{
                            htmlTable=htmlTable + "<td>" + nodeVar[0].firstChild.nodeValue + "</td>";
                        }
                        catch (er){
                            htmlTable=htmlTable + "<td> </td>";
                        }

                        //Loop Value for Album year
                        nodeVar=Songs[i].getElementsByTagName("AlbumYear");
                        try{
                            htmlTable=htmlTable + "<td>" + nodeVar[0].firstChild.nodeValue + "</td>";
                        }
                        catch (er){
                            htmlTable=htmlTable + "<td> </td>";
                        }

                        //Loop Value for AlbmTrackIndex
                        nodeVar=Songs[i].getElementsByTagName("AlbumTrackIndex");
                        try{
                            htmlTable=htmlTable + "<td>" + nodeVar[0].firstChild.nodeValue + "</td>";
                        }
                        catch (er){
                            htmlTable=htmlTable + "<td> </td>";
                        }

                } //end Songs loop
                htmlTable=htmlTable + "</tr>";
              } //end if
              htmlTable=htmlTable + "</table>";
              document.getElementById('myDiv').innerHTML=htmlTable;
        }; //end Anonymous function

        xmlhttp.open("GET",url,true);
        xmlhttp.send();
    } //end loadXMLFromFile function

如何在Ajax变量中添加键以返回XML数据库中的所有值

3 个答案: