級聯下拉式功能表就是從一個下拉式功能表中選中一項後，相應的另一個下拉式功能表的內容會隨之改變。
一般來說，最簡單的，就是每次選中都提交一次表單，重新整理整個頁面。這也是使用者體驗度最差的。
另一種是把所有選項在第一次載入時就全部載入整個頁面中的 javascript 數組中，然後級聯通過 JavaScript 來控制，在整個資料量不大時，這是一個不錯的實現無重新整理並且快速的方法，但是當整個資料量非常大時，這種方法就會使第一次載入變得非常慢了。
還有就是採用 Ajax 方式，即開始只載入第一層菜單的內容，當使用者選中第一層菜單的某項時，再通過 XmlHttpRequest 來擷取相應選項所對應的第二層菜單的內容。這種方式效果最好，但是採用傳統方式來編寫這樣的 Ajax 程式碼量會比較多。而且如果設計不好，伺服器端返回菜單內容的程式的可複用性也會很差。
但是在本文中你會看到用 PHPRPC 來實現這種 Ajax 效果是多麼的簡單，並且還會具有非常高的可複用性。
本文以省市兩級級聯下拉式功能表為例，為了舉例方便，本文中採用的是 SQLite 資料庫，因為這個檔案型資料庫比較容易部署，而且查詢效率很高（當然建立該資料庫的效率不高，但建立僅一次而已，該資料庫在該程式中內容是不變的），不過伺服器需要安裝 SQLite 擴充。
這個資料庫中的表只有 2 個，一個 province 表，一個 city 表。province 表中，只有 id 和 name 兩個欄位，分別是省份編號（主鍵）和省名。city 表中，有 id、name 和 pid 三個欄位，id 是城市編號，name 是城市名，pid 是城市所在省的編號，與 province 表中的省份編號相對應。
建立該資料庫的程式這裡就不給出來了，它包含在後面提供的執行個體下載中。
下面來看看建立這個程式的伺服器端有多麼簡單，為了提高可複用性，我們把伺服器端分為了 2 個檔案，一個是 function.php，另一個是 rpc.php。function.php 中定義了實際的遠程調用函數，但是他們也可以作為伺服器端的本地函數調用，你會發現他們跟伺服器端的普通函數沒有任何區別：
下載: function.php
<?php
$sqlite = new SQLiteDatabase('area.db');
function get_province() {
global $sqlite;
$sql = "select * from province order by id";
return $sqlite->arrayQuery($sql, SQLITE_ASSOC);
}
function get_city($pid) {
global $sqlite;
$pid = sqlite_escape_string($pid);
$sql = "select * from city where pid = $pid order by id";
return $sqlite->arrayQuery($sql, SQLITE_ASSOC);
}
?>
而 rpc.php 更加簡單，它是提供給用戶端調用的介面，它只有 3 行語句：
下載: function.php
<?php
require_once('function.php');
require_once('phprpc_server.php');
new phprpc_server(array('get_province', 'get_city'));
?>
其中最後一句，就是指定哪些函數要暴露給用戶端。只有指定的函數用戶端才可以調用，這樣可以保證伺服器的安全性。
伺服器端到此就建立完了。你會探索服務器端只負責把資料查詢出來返回給用戶端就完事了，其它的不做任何處理。
那麼下面該看一看用戶端了，用戶端雖然很簡單，但是我還是把它分成了兩個檔案，一個 js 檔案，一個 html 檔案，你會發現用 PHPRPC，用戶端都不需要用 PHP。
下載: area.js
// 建立 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 >
<select id="province" ></select>
<select id="city"></select>
</body>
</html>
上面的 html 中包含的 phprpc_client.js 是壓縮版本（因為不需要用到加密，這裡是 lite 壓縮版）的，這樣可以免去包含多個 js 檔案的麻煩。
大家會發現這個程式不但可複用性好（比如 clear_select 和 set_select 兩個函數也可以在其它程式中使用），而且使得整個程式的思路清晰，比如那個緩衝功能，在這裡實現的就非常的簡單，而且效果也非常的好。
通過 PHPRPC，你不需要再專註於伺服器端和用戶端的資料格式交換，不需要再去考慮 XmlHttpRequest 對象的建立和使用，PHPRPC 會自動幫你完成這一切，你只需要關注具體的事務就可以了。用 PHPRPC 來做 Ajax 編程，就是這麼簡單。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
