豆豆网 > 技术应用 > 程序设计 > PHP > 正文

用PHPRPC实现 Ajax 级联下拉菜单

http://tech.ddvip.com 2007年08月24日社区交流

关键字： PHP foreach Parse error MySQL PHP开发缓存技术

内容摘要：但是在本文中你会看到用 PHPRPC 来实现这种 Ajax 效果是多么的简单，并且还会具有非常高的可复用性。

// 创建 phprpc 客户端对象 rpc
phprpc_client.create('rpc');
var city = []; // 用于缓存已加载的城市数据
/*
* 清除 select 中的选项，该方法可复用
*
* so: 要清除选项的 select 对象
*
*/
function clear_select(so) {
　 for (var i = so.options.length - 1; i > -1; i--) {
　 　　// 有些浏览器不支持 options 属性的 remove 方法，
　 　　// 但支持 DOM 的 removeChild 方法（比如：Konqueror）
　 　　if (so.options.remove) {
　 　　　　so.options.remove(i);
　 　　}
　 　　else {
　 　　　　so.removeChild(so.options[i]);
　 　　}
　 }
}
/*
* 设置 select 中的选项，该方法可复用
*
* so: 要设置选项的 select 对象
*　d: 选项数据数组
* vf: 选项值所对应的数组中的字段名
* tf: 选项文本所对应的数组中的字段名
*/
function set_select(so, d, vf, tf) {
　 for (var i = 0, n = d.length; i < n; i++) {
　 　　var opt = document.createElement('option');
　 　　opt.text = d[i][tf];
　 　　opt.value = d[i][vf];
　 　　// 有些浏览器不支持 options 属性的 add 方法，
　 　　// 但支持 DOM 的 appendChild 方法（比如：Konqueror）
　 　　if (so.options.add) {
　 　　　　so.options.add(opt);
　 　　}
　 　　else {
　 　　　　so.appendChild(opt);
　 　　}
　 }
}
// 设置省份的下拉菜单
function set_province_select(d) {
　 var so = document.getElementById('province');
　 set_select(so, d, 'id', 'name');
　 // 设置首选省份的城市下拉列表
　 change_province(1);
}
// 设置城市的下拉菜单
function set_city_select(d, vf, tf) {
　 var so = document.getElementById('city');
　 // 清空原有选项
　 clear_select(so);
　 // 设置新选项
　 set_select(so, d, vf, tf);
}
// 当省份改变，相应的改变城市列表
function change_province(pid) {
　 // 如果已缓存，则直接显示缓存中的列表
　 if (city[pid]) {
　 　　set_city_select(city[pid], 'id', 'name');
　 }
　 else {
　 　　// 否则，先显示载入中
　 　　set_city_select([['', 'Loading...']], 0, 1);
　 　　// 然后调用远程过程载入城市信息
　 　　// 调用远程过程时，最后一个参数指定的是回调函数
　 　　rpc.get_city(pid, function (result) {
　 　　　　// 把载入的数据放入缓存
　 　　　　city[pid] = result;
　 　　　　// 更新城市列表
　 　　　　set_city_select(result, 'id', 'name');
　 　　});
　 }
}
// 定义当 rpc 客户端初始化（use_service）完毕后执行的内容
rpc.onready = function () {
　 // 调用获取省份内容的远程过程，并设置回调函数为 set_province_select
　 rpc.get_province(set_province_select);
}

　　index.html

<html>
<head>
<script type="text/javascript" src="phprpc_client.js"></script>
<script type="text/javascript" src="area.js"></script>
</head>
<body onload="rpc.use_service('rpc.php');">
<select id="province" onchange="change_province(this.value);"></select>
<select id="city"></select>
</body>
</html>

　　上面的 html 中包含的 phprpc_client.js 是压缩版本（因为不需要用到加密，这里是 lite 压缩版）的，这样可以免去包含多个 js 文件的麻烦。

　　大家会发现这个程序不但可复用性好（比如 clear_select 和 set_select 两个函数也可以在其它程序中使用），而且使得整个程序的思路清晰，比如那个缓存功能，在这里实现的就非常的简单，而且效果也非常的好。

　　演示程序

　　实例下载（sqlite 版）

　　实例下载（mysql 版）

　　通过 PHPRPC，你不需要再专注于服务器端和客户端的数据格式交换，不需要再去考虑 XmlHttpRequest 对象的创建和使用，PHPRPC 会自动帮你完成这一切，你只需要关注具体的事务就可以了。用 PHPRPC 来做 Ajax 编程，就是这么简单。

上一页 1 23

责编：豆豆技术应用

点击发表评论

正在加载评论...

php专题推荐

精华文章推荐