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文件的程序就写完了,一天一进步!