jQuery与JSON在Drupal开发中的使用

为了要对代理商所在地进行选择,我需要做一个省和城市的级联选择功能。具体的功能是在省份的下拉列表(设为provinceList)中选中一个省 的时候,要在城市的下拉列表(设为cityList)中列出选中省份所对应的城市来。比如在省份列表中选择”广东省”后,城市列表应该是”肇庆市”、”广 州市”、”佛山市”……等。要实现这个功能,一般的WEB开发的方法有两个:

1.刷新网页方式
1)写一段provinceList的onchange事件处理脚本。
2)在provinceList的onchange事件中,把用户选择的省份提交到服务器。
3)服务器根据用户提交的省份参数。查找对应的城市列表,填充到cityList中去,重新呈现网页回送给客户端。
4)整个网页被再次程序给客户端。客户端在cityList中显示对应省份的城市列表。

这种方式的缺点非常明显:
首先,每次省份选择的改变都要服务器去做筛选参数,查找数据,填充数据,呈现网页等一通工作。开发和维护难度高。
其次,用户每改变一次省份选择,网页都要重新下载,客户体验不佳。

2.不刷新网页方式
1)网页第一次呈现的时候就把所有的省份和省市及其关联性的数据以网页脚本形式下载到客户端。
2)在provinceList的onchange事件中,脚本根据用户选择的省份以及在上一点提到的网页脚本中指定的省份与城市关系来填充cityList数据。
这种方式也有缺点:
在服务器端查询相关数据并生成客户端脚本来呈现和表示省份和城市及其关联性较为复杂。而在客户端,provinceList的onchange事件处理脚本也较为复杂。

而使用jQuery+JSON作为工具,在drupal平台上开发这个功能就简单得多了。
1.首先是开发一块网页客户端javascript代码(假设provinceList对应的下拉列表ID为search-province,而cityList对应的下拉列表控件ID为search-city),以下列出该块代码及其注释:

<?php
--------------------------------------------------------------------------
//document就绪后执行该代码块
$(function() {
//search-province的onchange事件处理代码
$("#search-province").change(function() {
//对请求网址'/ojcustom/getcitys/选中省份id'后drupal返回的JSON数据data进行处理的代码块
var getCitys = function (data) {
// 解析drupal返回的JSON数据data为javascript对象result,该对象包含了drupal返回的对应城市数组(array)
var result = Drupal.parseJson(data);
//填充城市列表之前,先清空现有的列表数据
$("#search-city").empty();
//针对返回的每一城市数据,一一填充到search-city的列表项中去
for(key in result) $("#search-city").append("");
}//getCitys()
//向网址'/ojcustom/getcitys/选中省份id '发送请求,请求参数为null,指定返回JSON数据的处理函数为getCitys
$.get('/ojcustom/getcitys/'+$("#search-province")[0].value, null,getCitys);
//结束事件处理代码
return
false;
});//change()
});//$(function())
---------------------------------------------------------------------------
 
?>

2.其次是在服务器端开发一块用来处理向网址’/ojcustom/getcitys/选中省份id ‘提交的请求的PHP代码:

<?php
---------------------------------------------------------------------------
//本函数通过用户在网址中提交的选中省份ID来获取相应城市列表,并且把列表数据转换成JSON数据返回给客户端
function get_citys_by_province_id(){
//用户提交网址中的第三个参数就是用户选中的省份ID
if (!is_numeric(arg(2))) exit;
//查找数据库得出相应城市列表
$result =db_query('select cid,name from {city} where pid='.arg(2));
//一一取出城市数据,并且把它们记录在一个数组(array)$options中
$options = array();
while ($term = db_fetch_object($result)) {
$choice = new stdClass();
$choice = array('value'=>$term->cid,'text' =>$term->name);
$options[] = $choice;
}
$options[] = array('value'=>'','text' =>'请选择');
//使用drupal内置的函数把城市数组转换成JSON数据,并且把它输出到客户端
print drupal_to_js($options);
//客户端输出结束
exit;
}
---------------------------------------------------------------------------
?>

这样,就完整完成了整个功能。
上面两段代码非常简单明了、易于控制,这个实现方法既没有第一个实现方法中的刷新网页问题和服务器端成本问 题,也没有第二种实现方法中的脚本生成难度和事件处理脚本难度的问题。通过本例子我们可以看出jQuery+JSON可以大大简化WEB开发的复杂度,而 druapl由于内置了jQuery与JSON,结合导drupal系统的其他优点,更加使得WEB开发变得可控和高效起来

发表评论

电子邮件地址不会被公开。 必填项已用*标注