JQUERY解析XML，并返回html

Posted 2023-05-15

现有xml如下，需要通过jquery解析，将结果返回网页的列表中，请大神帮助。

<?xml version="1.0" encoding="UTF-8" ?>
<viewentries timestamp="20131031T073059,37Z" toplevelentries="10">
<viewentry position="1" unid="37E02C9C442D762748257BEE0010B125" noteid="43CA" siblings="10">
<entrydata columnnumber="0" name="姓名">
<text>张三</text>
</entrydata>
<entrydata columnnumber="1" name="性别">
<text>男</text>
</entrydata>
<entrydata columnnumber="1" name="年龄">
<text>20</text>
</entrydata>
</viewentry>
<viewentry position="2" unid="904427D97F5CC90348257BEE0010F06E" noteid="43CE" siblings="10">
<entrydata columnnumber="0" name="姓名">
<text>李四</text>
</entrydata>
<entrydata columnnumber="1" name="性别">
<text>男</text>
</entrydata>
<entrydata columnnumber="1" name="年龄">
<text>30</text>
</entrydata>
</viewentry>
...
此处省略多个重复节点
...
<viewentry position="8" unid="77C6137141FD6D9C48257BEA001D8153" noteid="4262" siblings="10">
<entrydata columnnumber="0" name="姓名">
<text>王五</text>
</entrydata>
<entrydata columnnumber="1" name="性别">
<text>男</text>
</entrydata>
<entrydata columnnumber="1" name="年龄">
<text>25</text>
</entrydata>
</viewentry>
</viewentries>
要求返回格式为：
<tr>
<td>张三</td><td>男</td><td>20</td>
</tr>
<tr>
<td>李四</td><td>男</td><td>30</td>
</tr>
......
<tr>
<td>王五</td><td>男</td><td>25</td>
</tr>

你好！！

这个问题的重点在解析xml的元素上······

给出两种解决方式，代码如下：

<button id="btn">加载数据</button>
<table id="tbl" width="60%" border="1">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
</table>
-----------------------------------------------------------
<script>
$(document).ready(function() 
    $("#btn").click(function() 
        //假设你的请求为demo.xml
        $.ajax(
            url: "demo.xml",
            dataType: "xml",
            cache: false,
            success: function(data) 
                //请求成功后清空tbody中的内容
                $("#tbl tbody").empty();

                // 第一种方式,利用jquery对象
                $(data).find("viewentry").each(function() 
                    var $tr = $("<tr><td></td><td></td><td></td></tr>");
                    var entry = $(this);
                    entry.find("entrydata").find("text").each(function(index,ele) 
                        $tr.find("td:eq(" + index + ")").text($(ele).text());
                    );
                    $("#tbl").append($tr);
                );

                // 第二种方式,利用tmpl模板
                //这种方式需要引入一个jquery.tmpl.min.js文件
                var markup = "<tr><td>$$data.eq(0).text()</td><td>$$data.eq(1).text()</td><td>$$data.eq(2).text()</td></tr>";
                // 给markup这个模板起个名字叫yourTemplate并编译
                $.template("yourTemplate", markup);
                $(data).find("viewentry").each(function() 
                    //这里是使用编译好的模板，并为其指定数据，最后追加至table
                    $.tmpl("yourTemplate", $(this).find("entrydata >text")).appendTo($("#tbl"));
                );
            
        );
    );
);
</script>

 还有不明白的地方可以追问····

希望对你有帮助！！

追问

非常感谢你的回答，我已经按照你说的测试了，完全OK，不过还有三个问题，我可以再追加财富值，希望你不吝赐教，谢谢先！
1、如果我不是完全获取所有xml数据，即：xml中有姓名、性别、年龄，但是我只想获取姓名、年龄，该如何实现呢？
2、如果数据量较大，如果加入分页呢？
3、xml中的unid、noteid又该如何获取呢？

追答

上午好！

    只想获取姓名、年龄的，可以根据元素entrydata的属性值来访问，这里用到了jQuery中的属性选择器；

$(data).find("viewentry").each(function() 
    var $tr = $("<tr><td></td><td></td></tr>");
    var entry = $(this);
    //这里使用了属性选择器
    //也可以使用这种写法来替代entrydata[name!='性别']（意为属性name!='性别'的元素）
    entry.find("entrydata[name='姓名'],entrydata[name='年龄']").find("text").each(function(index,ele) 
        $tr.find("td:eq(" + index + ")").text($(ele).text());
    );
    var $tr2 = $("<tr><td colspan='2'></td></tr>");
    $tr2.find("td").text( "unid:" + entry.attr("unid") + "-----noteid:" + entry.attr("noteid") );
    $("#tbl").append($tr).append($tr2);
);

   2.      如果数据量大，加入分页。这个分页有两种方式：一种是在服务端做，一种是在客户端。

            服务端做的好处就是每次请求返回的数据量较小，但是这种请求需要多次发出，比如第一页是一个请求，第二页又是一个请求，因为你的每次请求会附带参数，最起码得有个页号对吧，不然服务器无法根据你的请求返回对应的数据。

            客户端做的好处是不需要频繁的访问服务器了，当然前提是一次性将所有数据加载过来，这样做分页的速度比较快，而且可以节省服务器资源，但是一次性加载大量数据同样带来不小的牺牲。

            具体的分页代码就不贴了，度娘和谷哥一下，会有惊喜的·····

追问

上午好，非常感谢你的耐心回答。
1，已测，非常好；
2，你在第一条中已经答复，也已经取到，但是我是想增加一个链接，在链接中加入unid和noteid，即：姓名或者增加一列[操作]，对应查看详情，该如何做呢？
3，能辛苦一下，给我贴个代码吗？

追答var $tr = $("<tr><td></td><td></td><td></td></tr>");

$tr.find("td:eq(2)").html( "<a href=temp.php?id="+entry.attr("unid")+"&type="+entry.attr("noteid")+">查看详情</a>" );

$("#tbl").append($tr);

追问

实在是不好意思，刚才点击采纳问题的时候，不知道怎么弄的点错了，我已经向百度知道提交了修改申请，如果百度不改，我再开个问题，你回答一下，我把分给你补上！真心非常感谢你的回答，能否给我留个qq，方便我以后向你咨询。
再次感谢！

追答

神马情况？

桑梓死了！

追问

别，是我的错，我一定把分给你补上！

参考技术A var xml="那个xml字符串";
var table=$("那个table的选择器");
$(xml).find("viewentry").each(function()
    var tr=$("<tr>");
    $(this).find("entrydata").each(function()
        tr.append("<td>"+$(this).child("text").text+"</td>");
    );
    table.append(tr);
);

我没有测试过，不过大概是这么个思路

本回答被提问者采纳

160928JQuery解析XML数据的demo

用JavaScript解析XML数据是常见的编程任务，JavaScript能做的，JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。

 方案1

当后台返回的数据类型是xml对象，如下：

那么，前端jquery解析：

就会得到"成功!"这个文字信息。    

方案2

 当你要解析一个xml文件对象时候，如xmlfile.xml：

 

$.get("xmlfile.xml",function(xml){   

    $(xml).find("item").length;   

});

注意：

如果读取的是xml字符串，则要注意一点，xml字符串的必然被"<xml>"和"</xml>"包围才可以被解析。