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文件是用来存储数据的,相当于在数据库中读取文件。

你可能感兴趣的:(jquery)