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) function removeAllOpt(sel) { |
注释:
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 5 | var 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实现多级联动下拉框或者下拉菜单都是很容易的事情。