Jquery Ajax读取XML文档实现联动下拉框实例

 

　　说到在PHP网站开发与建设过程中进行AJAX开发，Jquery和Prototype是两个大家耳熟能详的AJAX开发包，之前我讲述了如何利用Prototype Ajax读取XML文档实现联动下拉框实例，今天和大家分享如何利用Jquery和XML文档进行交互以实现Ajax联动下拉框的实例。
　　在Ajax应用中，XML文档是最常用的交互手段，进而如何使用Jquery对XML文档进行读取和解析是最关键的部分，下面的PHP Ajax联动下拉框实例中我使用了Jquery中的find函数、text函数及Jquery(expression, [context]) 函数，我认为这些函数是Jquery解析XML文档的核心之一。
Ajax实例（example）说明
　　主要功能：通过Jquery解析xml内容，实现省份和城市之间的二级联动，依此类推，也可以延伸至多级联动下拉框或者多级联动下拉菜单。
准备工作
　　下载Jquery，并放至相关开发目录，实例中放至在js目录下，下载地址：Jquery官网或者去google code下载Jquery开发包。
　　和之前Prototype Ajax读取XML文档实现联动下拉框实例一样需要建立省份和城市的相关数据库并新建Form表单同时包含两个Select框，即ProvinceList（省份select框）和CityList（城市select框）
引入Jquery开发包

1<script src="js/jquery-1.3.js"></script>

 
代码实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46<script>
var targetSelect;

function showCity(proId,targetSel,http)
{
    var sendData = "proId=" + proId;
   
    targetSelect = targetSel;
   
    $.ajax({
       type: "POST",
       url: http,
       data: sendData,
       dataType: "xml",
       success: function(xml){
            removeAllOpt(targetSelect);
           
            property = $(xml).find("property");
           
            if(targetSelect.options.length >= 0) {
                targetSelect.options[0] = new Option();
                　　　　  targetSelect.options[0].value = "0";
                targetSelect.options[0].text = "请选择";
            }
           
            if(property.length >0){//对应的省份有城市信息则显示
                for (var i=0,x=1;i<property.length;i++,x++)
                {
                    　　　name = $("name",property[i]).text();
                    　　　value = $("value",property[i]).text();
                    　　　targetSelect.options[x] = new Option();
                    　　　targetSelect.options[x].value = value;
　　　　　　　　　　　　　　targetSelect.options[x].text = name;
                }
            }
        }
    });
}

function removeAllOpt(sel) {
    var arr = sel.options;     
    for(var i=0; i<arr.length; i++) {
　　　　　　sel.remove(i);
    }
}
</script>

注释：
targetSelect：全局变量，存储目标下拉框，也就是cityList
showCity函数用来获取某个省份的所有城市，启动Ajax,传递必要的参数并解析返回的XML文档，最终通过DOM操作实现无刷新显示。proId参数代表源操作select框，即provinceList，targetSel参数代表最终实现自动刷新的select框，即cityList，http参数代表提交至后台处理的PHP执行文件，此参数也可以置空，直接在函数内部指定后台处理的PHP执行文件也是可以的。
第10~37行，是Jquery实现Ajax功能的核心部分。
知识点：$.ajax是Jquery的底层AJAX实现，应用较为复杂，简单介绍几个参数使用方式，更多信息可以下载Jquery中文帮助文档自行查看。
type：请求方式，即”POST” 或 “GET”， 默认为 “GET”，等同于FORM表单的GET和POST。
url：发送请求的地址，即提交至后台处理的PHP执行文件。
data：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
dataType：服务器返回的数据类型。如不指定Jquery将自动根据HTTP包MIME信息返回 responseXML 或 responseText，可用值:
“xml”:返回 XML 文档。
“html”:返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
“script”:返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了”cache”参数。
“json”: 返回JSON数据 。
“jsonp”:JSONP 格式。使用JSONP形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串。
success:请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据。
第18行：find函数，类似于Javascript中的getElementsByTagName()函数，搜索所有与指定表达式匹配的元素，如果有多个，则以数组表示。后台生成的XML文档格式和Prototype Ajax读取XML文档实现联动下拉框实例文章中的一致。
第29~30行：在制定的DOM文档中搜索指定的元素，并取得匹配元素的内容。这里面用到了Jquery的核心函数Jquery(expression, [context]) 以及文本函数text()。
第31~33行：给指定的select赋值。
第40~45行：removeAllOpt函数用来每次处理返回内容时清空目标select框
Jquery实现Ajax中XML交互的其他方法
你可以将$.ajax()以$.get()或$.post()的方式实现，即

1
2
3
4
5var par = "{ proId:" + proId + " }";
$.post("../ajax/province.php", par,
function(xml){
   ….
  },"xml");

Jquery和Prototype的使用感受
　　Jquery属于轻量级AJAX开发包。开发起来使用方面，节省了大量代码。Prototype属于重量级AJAX开发包，更像OO编程。Jquery在DOM操作方面比Prototype好很多，其他更深层次的感受需要进一步使用才能慢慢体会出来。
调用方法：

1<select name="provinceList" onChange="showCity(this,form1.cityList,’../ajax/province.php’)">

province.php主要用来生成输出XML文档，同时根据省份ID获取该省份下所有城市列表，具体可以根据自己的需要编写对应的PHP代码。
总结：
　　以上就是在使用PHP进行WEB2.0网站开发时，如何利用Jquery读取并解析XML文档实现二级联动下拉框的Ajax实例，只要理解了原理，利用Ajax实现多级联动下拉框或者下拉菜单都是很容易的事情。