用 html 中的 javascript 解析 xml

Question

你好，我想用 javascript 解析 serverlist.xml 到一個 html 網站。 它適用於國家、主機名、名稱、地圖、numplayers 和 maxplayers，但是當我想解析“玩家”的內容時

table +=  x[i].getElementsByTagName("players")[0].childNodes[0].nodeValue;

然后我再也看不到任何東西了。 我猜是因為玩家標簽有更多的子節點，但我不知道如何解決這個問題。 謝謝你的幫助。

服務器列表.xml

<qstat>
  <server>
    <hostname>1.2.3.4:27966</hostname>
    <name>Server 1</name>    
    <gametype>Type 1</gametype>
    <map>q3dm3</map>
    <numplayers>3</numplayers>  
    <maxplayers>18</maxplayers>
    <numspectators>0</numspectators>
    <maxspectators>0</maxspectators>
    <ping>0</ping>
    <retries>0</retries>
    <players>
      <player>
        <name>E.Krenz^GDR</name>
        <score>6</score>
        <ping>0</ping>
        </player><player>
        <name>G.Schroeder^GER</name>
        <score>2</score>
        <ping>0</ping>
      </player>
      <player>
        <name>W.Ulbricht^GDR</name>
        <score>1</score>
        <ping>0</ping>
        </player></players>
  </server>
</qstat>

服務器列表.html

<html>
<body>
<table id="demo"></table>

<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "../serverlist.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("server");
table='<tr><th bgcolor="#333333">Players</th><th bgcolor="#333333">Country</th><th bgcolor="#333333">Servername</th><th bgcolor="#333333">IP</th><th bgcolor="#333333">Map</th><th bgcolor="#333333">Players</th><th bgcolor="#333333">Connect</th></tr>';
for (i = 0; i <x.length; i++) {
  table += "<tr><td>";
  table +=  x[i].getElementsByTagName("players")[0].childNodes[0].nodeValue;
  table += "</td><td>";
  table += '<iframe src="../serverlist/country/';
  table +=  x[i].getElementsByTagName("hostname")[0].childNodes[0].nodeValue;
  table += '.php" height="25px" width="27px" frameborder="0" scrolling="yes"></iframe>'
  table += "</td><td>";
  table += x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
  table += "</td><td>";
  table +=  x[i].getElementsByTagName("hostname")[0].childNodes[0].nodeValue;
  table += "</td><td>";
  table +=  x[i].getElementsByTagName("map")[0].childNodes[0].nodeValue;
  table += "</td><td>";
  table +=  x[i].getElementsByTagName("numplayers")[0].childNodes[0].nodeValue;
  table += "/";
  table +=  x[i].getElementsByTagName("maxplayers")[0].childNodes[0].nodeValue;
  table += '</td><td><a href="hlsw://';
  table +=  x[i].getElementsByTagName("hostname")[0].childNodes[0].nodeValue;
  table += '/?Connect=1"><img src="../images/hlsw.jpg" width="13" height="13" border="0" />';
  table += '<img src="../images/pixel.png" width="10" height="10" border="0" /><a href="qtracker://';
  table +=  x[i].getElementsByTagName("hostname")[0].childNodes[0].nodeValue;
  table += '?game=quake3&amp;action=connect"><img src="../images/qtracker.jpg" width="13" height="13" border="0" /></a>'
  table += '<img src="../images/pixel.png" width="10" height="10" border="0" /><a href="../serverlist/bat/';
  table +=  x[i].getElementsByTagName("hostname")[0].childNodes[0].nodeValue;
  table += '.bat"><img src="../images/bat.png" width="13" height="13" border="0" /></a>'
  table += "</td></tr>";
}
document.getElementById("demo").innerHTML = table;
</script>
</body>
</html>

Answer 1

根據評論中的討論，下面是一個完整的示例，其中包含一個文本到 xml 解析器函數以及一個簡潔的數據類型標識符。

simplify功能使用上述功能來限制代碼的重復和復雜化，並將 XML DOM 結構轉換為一個對象（或對象列表）。

每個“節點”有 3 個方面，代表一個 XML 節點：

Kind - “nodeName”（標簽名）
Attr - 屬性
Data - 內容

您可以根據需要更改這些“方面名稱”。

要測試代碼，只需復制並粘貼到一個新的 HTML 文件中，保存並使用您的網絡瀏覽器打開它（本示例不需要網絡服務器）。

下面這個例子的輸出將出現在web-console ； 因此，只需打開 Web 瀏覽器的“開發人員工具”並查看控制台日志。

請參閱最后一個<script>元素中的 3 行 JavaScript 作為如何使用它的說明。

<html>
    <head></head>
    <body>

        <script>
            function typeOf(data)
            {
                var tpof = (({}).toString.call(data).match(/\s([a-zA-Z]+)/)[1].toLowerCase());

                tpof = (((tpof == 'element') || (tpof == 'window') || (tpof == 'global')) ? 'object' : tpof);
                tpof = (((tpof == 'htmlcollection') || (tpof == 'namednodemap')) ? 'array' : tpof);

                return tpof;
            }



            function parsed(data)
            {
                var text, list;

                if (typeOf(data) == 'string')
                {
                    data = data.trim();
                    text = data.toLowerCase();
                    list = {null:null, true:true, false:false};

                    if (!isNaN(data))
                    { return (data * 1); }

                    if (list[data])
                    { return list[data]; }

                    if ((data.substr(0,1) == '<') && (data.substr(-1,1) == '>'))
                    {
                        var pars = new DOMParser();
                        var dxml = null;

                        try
                        { dxml = pars.parseFromString(data, "application/xml"); }
                        catch(err)
                        { console.log(err); }

                        if (dxml)
                        { return ([].slice.call(dxml.childNodes)); }
                    }

                }

                return data;
            }



            function simplify(dxml)
            {
                var resl, kind, indx=0;
                var list;

                if (typeOf(dxml) == 'array')
                {
                    resl = [];

                    for (var i in dxml)
                    {
                        if (!dxml.hasOwnProperty(i) || !dxml[i].nodeName)
                        { continue; }

                        kind = dxml[i].nodeName;

                        if ((kind == '#text') || (kind == '#comment'))
                        { continue; }

                        resl[indx] = simplify(dxml[i]);
                        indx++;
                    }

                    return resl;
                }


                resl = {Kind:dxml.nodeName.toLowerCase(), Attr:{}, Data:''};

                if (dxml.attributes && (dxml.attributes.length > 0))
                {
                    list = [].slice.call(dxml.attributes);

                    for (var i in list)
                    {
                        if (!list.hasOwnProperty(i) || !list[i].name || !list[i].value)
                        { continue; }

                        resl.Attr[list[i].name] = parsed(list[i].value);
                    }
                }

                if (dxml.childElementCount < 1)
                { resl.Data = (dxml.textContent || ''); }
                else
                { resl.Data = simplify([].slice.call(dxml.childNodes)); }

                return resl;
            }
        </script>


        <script id="xdom" type="text/xmldata">
            <qstat>
            <server>
                <hostname>1.2.3.4:27966</hostname>
                <name>Server 1</name>    
                <gametype>Type 1</gametype>
                <map>q3dm3</map>
                <numplayers>3</numplayers>  
                <maxplayers>18</maxplayers>
                <numspectators>0</numspectators>
                <maxspectators>0</maxspectators>
                <ping>0</ping>
                <retries>0</retries>
                <players>
                <player>
                    <name>E.Krenz^GDR</name>
                    <score>6</score>
                    <ping>0</ping>
                    </player><player>
                    <name>G.Schroeder^GER</name>
                    <score>2</score>
                    <ping>0</ping>
                </player>
                <player>
                    <name>W.Ulbricht^GDR</name>
                    <score>1</score>
                    <ping>0</ping>
                    </player></players>
            </server>
            </qstat>
        </script>


        <script>
            var text = document.getElementById('xdom').innerHTML;
            var xdom = parsed(text);
            var tree = simplify(xdom);

            console.log(tree);
        </script>

    </body>
</html>

如果您發現代碼有用，請不要忘記“投票”，謝謝；)

用 html 中的 javascript 解析 xml

問題描述

1 個解決方案

解決方案1
1 已采納

用 html 中的 javascript 解析 xml

問題描述

1 個解決方案

解決方案1 1 已采納

解決方案1
1 已采納