程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> 用 PHPRPC 實現 Ajax 級聯下拉菜單

用 PHPRPC 實現 Ajax 級聯下拉菜單

編輯:.NET實例教程
 

級聯下拉菜單就是從一個下拉菜單中選中一項後,相應的另一個下拉菜單的內容會隨之改變。

一般來說,最簡單的,就是每次選中都提交一次表單,刷新整個頁面。這也是用戶體驗度最差的。

另一種是把所有選項在第一次加載時就全部載入整個頁面中的 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 行語句:

rpc.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 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 兩個函數也可以在其它程序中使用),而且使得整個程序的思路清晰,比如那個緩存功能,在這裡實現的就非常的簡單,而且效果也非常的好。

通過 PHPRPC,你不需要再專注於服務器端和客戶端的數據格式交換,不需要再去考慮 XMLHttpRequest 對象的創建和使用,PHPRPC 會自動幫你完成這一切,你只需要關注具體的事務就可以了。用 PHPRPC 來做 AJax 編程,就是這麼簡單。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved