使用 ajax 读取 php 生成的 XML 文件并使用 javascript 输出到 html

Question

我有一个看起来是从 php（实时提要）生成的 XML 文件。基本上它包含我想要在 html 网页上进行对比和输出的数据。

XML 提要如下所示：

<feeds>
    <level id="999991000" name="Premier level">
        <group name="mix">
            <battles>
                <battle>
                    <supplier id="3000000" name="Stongteam" result="190" percentage="64%"/>
                    <supplier id="3000222" name="Blackteam" result="109" percentage="36%"/>
                </battle>
                <battle>
                    <supplier id="3000000" name="Strongteam" result="198" percentage="66%"/>
                    <supplier id="3000111" name="Redteam" result="101" percentage="34%"/>
                </battle>
            </battles>
        </group>
    </level>
    <level id="9999922222" name="Expert level">
        <group name="mix">
            <battles>
                <battle>
                    <supplier id="3000000" name="Stongteam" result="178" percentage="73%"/>
                    <supplier id="3000222" name="Blackteam" result="65" percentage="27%"/>
                </battle>
                <battle>
                    <supplier id="3000000" name="Strongteam" result="173" percentage="71%"/>
                    <supplier id="3000111" name="Redteam" result="70" percentage="29%"/>
                </battle>
            </battles>
        </group>
    </level>
</feeds>

例如，我基本上需要显示此文件中的一些内容。

顶级
对于战斗 1 - teamname1 VS teamname2
Result for teamname VS Result for teamname2 团队名称 1 的 百分比 VS 团队名称 2 的 百分比

对于战斗 2 - teamname1 VS teamname3
Result for teamname 1 VS Result for teamname3 团队名称 1 的 百分比 VS 团队名称 3 的 百分比

专家级别
对于战斗 1 - teamname VS teamname2
Result for teamname 1 VS Result for teamname2 团队名称 1 的 百分比 VS 团队名称 2 的 百分比

我假设我需要使用 Ajax 来引入 xml 数据，然后使用某种形式的 javascript 来实现这一点，但我不知道从哪里开始。有谁知道我可以使用的任何参考资料或 jQuery 插件/方法，或许可以为我指明正确的方向？

非常感谢。

Answer 1

如果我是你，我肯定会调查 XSLT！

简而言之，XSLT 是 XML 数据的图形层，它将根据 XML 数据中的内容呈现类似于 HTML 的页面。互联网上有很多帮助，但作为快速入门，我想维基百科还不错：XSLT on Wikipedia。

所以基本上，你有两个解决方案：

• 如果服务器属于您，您可以应用您的 XSLT 样式表 直接在其上并使用 XHR 获得结果（由于潜在的跨浏览器问题，首选解决方案）
• 如果您不使用服务器，请使用 XHR 下载您的 XML，然后使用 JS 和 XSLT 在客户端应用样式表。小心，我们的好老朋友 IE 需要它的好旧 ActiveX 来进行转换，至少上次我检查过。

祝你好运，别忘了每天做极客！

Answer 2

jQuery 的 parseXML 可能会让这变得轻而易举：http://api.jquery.com/jQuery.parseXML/

var xml = $('#xmlspan').html();
var xmlDoc = $.parseXML(xml);
var $xml = $(xmlDoc);

$xml.find("level").each(function() {
    var tiername = $(this).attr("name");
    alert (tiername);
    $(this).find("battle").each(function() {
        team1 = $(this).find("supplier:eq(0)").attr("name");
        team2 = $(this).find("supplier:eq(1)").attr("name");
        alert(team1 + ' - ' + team2);
        });
    });​