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

Read php generated XML file with ajax & output to html using javascript

本文关键字：使用 javascript 输出 html 文件读取 ajax php XML 更新时间：2023-09-26

我有一个XML文件，看起来是从php（实时提要）生成的。基本上，它包含了我想做的数据与比较&在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-队名1VS队名2
teamname 1的结果VS teamname 2的结果teamname 1的百分比VS teamname 2 的百分比

对于战斗2-队名1VS队名3
teamname 1的结果VS teamname 3的结果teamname 1的百分比VS teamname 3 的百分比

专家级
对于战斗1-队名VS队名2
teamname 1的结果VS teamname 2的结果teamname 1的百分比VS teamname 2 的百分比

我想我需要使用Ajax来引入xml数据，然后使用某种形式的javascript来实现这一点，尽管我不知道从哪里开始。有没有人知道我可以使用的任何引用或jQuery插件/方法，也许可以为我指明正确的方向？

非常感谢。

如果我是你，我肯定会研究XSLT！

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

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

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

祝你好运，别忘了每天都去玩极客！

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);
        });
    });