jQuery学习之八-----jQuery解析xml文件（摘录）

最近写ipad客户端，需要用到jquery，所以学习一下，用到了jquery如何解析xml文件，和大家分享一下。

1、首先建立一个City.xml文件

View Code

 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <provinces>
 3   <province name="湖北">
 4     <city>武汉</city>
 5     <city>黄石</city>
 6     <city>宜昌</city>
 7     <city>天门</city>
 8   </province>
 9   <province name="湖南">
10     <city>邵阳</city>
11     <city>长沙</city>
12     <city>岳阳</city>
13   </province>
14   <province name="广东">
15     <city>广州</city>
16     <city>深圳</city>
17   </province>
18 </provinces>

2、在web前端建立一个Province.htm的界面

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>省市选择</title>
 5     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             $.ajax({
 9                 url: "City.xml",
10                 success: function (xml) {
11                     $(xml).find("province").each(function () {
12                         var t = $(this).attr("name");
13                         $("#DropProvince").append("<option>" + t + "</option>");
14                     });
15                 }
16             });
17             $("#DropProvince").change(function () {
18                 $("#sCity>option").remove();
19                 var pname = $("#DropProvince").val();
20                 $.ajax({
21                     url: "City.xml",
22                     success: function (xml) { 
23                         $(xml).find("province[name='"+pname+"']>city").each(function(){
24                             $("#sCity").append("<option>"+$(this).text()+"</option>");
25                         });
26                     }
27                 });
28             });
29         });
30     </script>
31 </head>
32 <body>
33     <form id="form1">
34     <div>
35         <select id="DropProvince" style="width: 60px;">
36             <option>请选择</option>
37         </select>
38         <select id="sCity" style="width: 60px;">
39         </select>
40     </div>
41     </form>
42 </body>
43 </html>

其实主要是注意怎样在html界面上解析xml文件，格式就是

View Code

 1 <script type="text/javascript">
 2         $(document).ready(function () {
 3             $.ajax({
 4                 url: "City.xml",
 5                 success: function (xml) {
 6                     $(xml).find("province").each(function () {
 7                         var t = $(this).attr("name");
 8                         $("#DropProvince").append("<option>" + t + "</option>");
 9                     });
10                 }
11             });
12             $("#DropProvince").change(function () {
13                 $("#sCity>option").remove();
14                 var pname = $("#DropProvince").val();
15                 $.ajax({
16                     url: "City.xml",
17                     success: function (xml) { 
18                         $(xml).find("province[name='"+pname+"']>city").each(function(){
19                             $("#sCity").append("<option>"+$(this).text()+"</option>");
20                         });
21                     }
22                 });
23             });
24         });
25     </script>

就是用$.ajax()调用xml文件的内容。然后$.each()进行循环操作，基本思想就是这样的，成功之后去执行success这个回调函数。这里的xml文件是用来存储数据的，相当于在数据库中读取文件。

posted on 2012-05-11 00:06 千里烟波226 阅读(3108) 评论(0) 编辑收藏举报