Jquery 读取xml文件

 在BS开发中我们会常用到xml,这里做一个用jquery读取xml文件的小练习

首先还是创建一个最简单的xml文件如下

 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <info>
 3   <user id="1">
 4     <name>中国</name>
 5     <sex>男</sex>
 6     <email>rong@163.com</email>
 7   </user>
 8   <user id="2">
 9     <name>李建国</name>
10     <sex>女</sex>
11     <email>xiaoli@163.com</email>
12   </user>
13 </info>

这个xml文件保证两个人的信息,姓名,性别,加上邮箱,然后我们再创建一个aspx的页面,通过$.get方法来读取这个xml文件,代码如下:

 1 <head runat="server">
 2     <title></title>
 3     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
 4     <script type="text/javascript">
 5         $(function () {
 6             $("#tuttons").click(function () {
 7                //读取xml的路经,返回一个date
 8                 $.get("NewFolder1/XMLFile1.xml", function (date) {
 9                     $("#hide").empty();//先清空div
10                     var strhtml = ""; //定义一个变量
11                     //在返回的date中找到名称为uset这个节点,然后遍历
12                     $(date).find("user").each(function () {
13                        
14                         strhtml += "姓名:" + $(this).find("name").text() + "<br/>";//找到当前name节点的值
15                         strhtml += "性别:" + $(this).find("sex").text() + "<br/>"; //找到当前sex节点的值
16                         strhtml += "邮箱:" + $(this).find("email").text() + "<br/>"; //找到当前email节点的值
17                     })
18                     $("#hide").html(strhtml); //保存到div中
19                 })
20             })
21 
22         })
23     </script>
24 </head>
25 <body>
26     <form id="form1" runat="server">
27     <div>
28     <input type="button" id="tuttons" value="提交" />
29     <div id="hide">
30     </div>
31     </div>
32     </form>
33 </body>
34 </html>

然后在浏览器中就会得到这个xml文件里面的信息了如下:

现在一个用jquery读取xml文件的程序就写完了,一天一进步!

posted @ 2012-12-25 11:13  apecoder  阅读(349)  评论(0编辑  收藏  举报