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

最新推荐文章于 2023-08-07 10:01:32 发布

小画家~

最新推荐文章于 2023-08-07 10:01:32 发布

阅读量436

点赞数

分类专栏： JQUERY

JQUERY 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

2、 Content-Type

很多情况下XML文件不能正常解析都是由于Content-Type没有设置好。如果Content-Type本身就是一个XML文件则不需要设置；如果是由后台程序动态生成的，那么就需要设置Content-Type为“text/xml”，否则JQuery会以默认的“text/html”方式处理，导致解析失败。以下是几种常见语言中设置Content-Type的方式。

[plain] view plain copy

header("Content-Type:text/xml"); //PHP
response.ContentType = "text/xml"; //ASP
response.setContentType("text/xm"); //JSP

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

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

 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的界面

 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文件，格式就是

 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>