2008-06 月份文章　顯示方式：簡文 | 列表

June 13,2008

[AJAX] jQuery的多重下拉式選單應用 PART2

昨天Jace傳授密技！原本 Ajax 回傳值我是用字串硬湊出來的，不過有密技可以用比較簡單易懂的方式呈現回傳資料，那就是PHP的json_encode！它會把陣列資料轉變成 json 的格式（其實原本 jQuery 吃的格式就是 json ），所以就不用辛苦的自己湊字串啦！提供第二種方法囉～修改過的地方用紅色標記：

index.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cascade.js"></script>
<script type="text/javascript" src="jquery.cascade.ext.js"></script>
<script type="text/javascript" src="jquery.templating.js"></script>
</head>
<body>
第一項 <select id="myParentSelect">
<option value="">請選擇</option>
<?php
    // 資料庫設定
    $host_sql = "localhost";
    $username_sql = "username";
    $password_sql = "password";

    $link = mysql_connect($host_sql, $username_sql, $password_sql) or die("無法連結資料庫");
    mysql_select_db('target', $link);
    mysql_query("SET NAMES UTF8");

    $query = "SELECT id, name FROM table where lv = 1";
    $result = mysql_query($query, $link);
    while ($row = mysql_fetch_assoc($result)) {
        echo '<option value="' . $row["id"] . '">' . $row["name"] . '</option>' . "\n";
    }

?>
</select>　
第二項 <select id="myFirstChildSelect">
<option value="">請選擇</option>
</select>
第三項 <select id="mySecondChildSelect">
<option value="">請選擇</option>
</select>

<script type="text/javascript">
$(function () {

    // 第一階層對應第二階層
    $('#myFirstChildSelect').cascade('#myParentSelect', {
    ajax: {
        type: "post",
        url:  'action.php',
        data: { act: 'first', val: $('#myParentSelect').val() },
        dataType: "json"
    },
    template: function(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; },
    match: function(selectedValue) { return this.When == selectedValue; }
    });

    // 第二階層對應第三階層
    $('#mySecondChildSelect').cascade('#myFirstChildSelect', {
    ajax: {
        type: "post",
        url:  'action.php',
        data: { act: 'second', val: $('#myFirstChildSelect').val() },
        dataType: "json"
    },
    template: function(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; },
    match: function(selectedValue) { return this.When == selectedValue; }
    });
});
</script>
</body>
</html>

action.php：

<?php

// 資料庫設定
$host_sql = "localhost";
$username_sql = "username";
$password_sql = "password";

$link = mysql_connect($host_sql, $username_sql, $password_sql) or die("無法連結資料庫");
mysql_select_db('target', $link);
mysql_query("SET NAMES UTF8");

if (!empty($_GET['act'])) {
    $action = $_GET['act'];
}

if (!empty($_GET['val'])) {
    $parentId = $_GET['val'];
}

$list = array();

switch ($action) {
    case 'first':
        $query = "SELECT id, name FROM table where lv = 2 AND parentid= $parentId";
        $result = mysql_query($query, $link);
        while ($row = mysql_fetch_assoc($result)) {
            $arr = array ('When' => $parentId, 'Value' => $row["ID"], 'Text' => $row["NAME"]);
            $list[] = $arr;
        }
        break;
    case 'second':
    default :
        $query = "SELECT id, name FROM table where lv = 3 AND parentid = $parentId";
        $result = mysql_query($query, $link);
        while ($row = mysql_fetch_assoc($result)) {
            $arr = array ('When' => $parentId, 'Value' => $row["ID"], 'Text' => $row["NAME"]);
            $list[] = $arr;
        }
        break;
}

echo json_encode($list);

哈，這樣就清楚多了呢！當然昨天用字串組的方式也可以囉，其所達到的效果是一樣的啦！提供另一種思考方向^^

Posted by taikobo0 at 11:02 │回應(5) │引用(0) │AJAX

June 12,2008

[AJAX] jQuery的多重下拉式選單應用

P.S 2009-04-09 update：有更輕鬆簡單的方法，詳見[AJAX] jQuery的多重下拉式選單應用：Select box manipulation

關於Ajax，我想最棒的地方就是可以於背景呼叫資料庫傳值吧～多重下拉式選單就是一項非常棒的Ajax應用；前幾天Jace丟過來一個國外的網址：jQuery.cascade : Cascading values from forms，這篇文章主要是在說明jQuery的cascade，而它就是用來實現多重下拉式選單的功能。

花了一點時間實作了一下，發現非常簡單就能實現！以前我也作過類似的功能，可是花了我非常多的時間...jQuery把它包裝起來，讓一切變的簡單多了；以下是簡單的範例，給有需要的人參考吧：範例是三階層的關聯式多重下拉式選單，分為index.php（呈現頁）、action.php（Ajax後端資料處理頁）、以及jQuery的cascade

index.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cascade.js"></script>
<script type="text/javascript" src="jquery.cascade.ext.js"></script>
<script type="text/javascript" src="jquery.templating.js"></script>
</head>
<body>
第一項 <select id="myParentSelect">
<option value="">請選擇</option>
<?php
    // 資料庫設定
    $host_sql = "localhost";
    $username_sql = "username";
    $password_sql = "password";

    $link = mysql_connect($host_sql, $username_sql, $password_sql) or die("無法連結資料庫");
    mysql_select_db('target', $link);
    mysql_query("SET NAMES UTF8");

    $query = "SELECT id, name FROM table where lv = 1";
    $result = mysql_query($query, $link);
    while ($row = mysql_fetch_assoc($result)) {
        echo '<option value="' . $row["id"] . '">' . $row["name"] . '</option>' . "\n";
    }

?>
</select>　
第二項 <select id="myFirstChildSelect">
<option value="">請選擇</option>
</select>
第三項 <select id="mySecondChildSelect">
<option value="">請選擇</option>
</select>

<script type="text/javascript">
$(function () {

    // 第一階層對應第二階層
    $('#myFirstChildSelect').cascade('#myParentSelect', {
    ajax: {
        type: "post",
        url:  'action.php',
        data: { act: 'first', val: $('#myParentSelect').val() }
    },
    template: function(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; },
    match: function(selectedValue) { return this.When == selectedValue; }
    });

    // 第二階層對應第三階層
    $('#mySecondChildSelect').cascade('#myFirstChildSelect', {
    ajax: {
        type: "post",
        url:  'action.php',
        data: { act: 'second', val: $('#myFirstChildSelect').val() }
    },
    template: function(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; },
    match: function(selectedValue) { return this.When == selectedValue; }
    });
});
</script>
</body>
</html>

action.php：

<?php

// 資料庫設定
$host_sql = "localhost";
$username_sql = "username";
$password_sql = "password";

$link = mysql_connect($host_sql, $username_sql, $password_sql) or die("無法連結資料庫");
mysql_select_db('target', $link);
mysql_query("SET NAMES UTF8");

if (!empty($_GET['act'])) {
    $action = $_GET['act'];
}

if (!empty($_GET['val'])) {
    $parentId = $_GET['val'];
}

$list = '[';

switch ($action) {
    case 'first':
        $query = "SELECT id, name FROM table where lv = 2 AND parentid= $parentId";
        $result = mysql_query($query, $link);
        while ($row = mysql_fetch_assoc($result)) {
            $list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["id"] . '\',\'Text\':\'' . $row["name"] . '\'},';
        }
        break;
    case 'second':
    default :
        $query = "SELECT id, name FROM table where lv = 3 AND parentid = $parentId";
        $result = mysql_query($query, $link);
        while ($row = mysql_fetch_assoc($result)) {
            $list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["id"] . '\',\'Text\':\'' . $row["name"] . '\'},';
        }
        break;
}

$list .= ']';
echo $list;

實作的重點是在資料的格式：

list = [{'When':'A1','Value':'W','Text':'SubchildA1a'},
          {'When':'A1','Value':'X','Text':'SubchildA1b'},
         ];

其中When代表上一階層的值，Value是此一階層的值，Test則是下拉式選單顯示的文字；要特別注意JavaScript是大小寫敏感的！實作這個範例途中，曾經被大小寫拖了一段時間...後來才發現～所以這地方要特別注意！希望大家都能輕鬆寫出關聯資料庫的多重下拉式選單囉^^

Posted by taikobo0 at 11:22 │回應(31) │引用(0) │AJAX

June 5,2008

[新知] Comet，Server Push與Ajax的應用？

這二年在Web界引起軒然大波的Ajax，雖然說穿了其內涵不過就是JavaScript的應用，以往也有前輩在許多年前就已經運用這項技術了～然而，在Ajax這個名詞出來以後，這項技術的發展，同時帶動許多著名framework的出現：Prototype、YUI以及目前我們公司使用的jQuery等；在這些好用的框架下，許多以往必須經由繁複程式碼才得以實現的功能，都可以利用函數呼叫的方式輕鬆呈現。

也就因為Ajax的大流行，這幾年有愈來愈多人想把所有本來在單機上執行的桌面程式，全部搬到Web上。桌面程式與網頁程式最大的差別就在，桌面程式與資料庫的連線是一直存在的，但是網頁程式則因為先天上http設計的關係，必須是建立在「客戶端發出請求，伺服端才得以回應」的條件下，才得以與資料庫建立連線；當然，神奇如Ajax也受此制約。這造成了一個問題，如果客戶端想要與伺服端同步更新資料，那應該怎麼辦呢？最常見的方式是Polling，也就是每隔一段時間由客戶端送出請求，看伺服端是否有新的資料回應；只要Polling的間隔時間夠短，客戶端就會有即時更新的錯覺。然而如果資料沒有更新，一來一往無謂的訊息傳送不但浪費頻寬，對伺服端也容易造成龐大負擔。

而Server Push就在需要即時更新資料的需求下出現，早期CGI的網路聊天室就是利用這種方式；如果再結合Ajax，則可以做到背景更新頁面的即時處理。Dojo的作者 Alex Russell 在 2006-03-03 發表的 Comet: Low Latency Data for the Browser，首次提出「Comet」這個新名詞！關於Comet詳細的介紹，可以參考Lighty RoR的文章：Comet For Ruby on Rails and Mongrel與淺談 Comet PUSH Server 架構。

我覺得，此理論的實現，確實可以讓桌面程式網頁化更輕鬆愉快！但是，目前似乎並沒有特別受到Web界的注意...所以，一切還是等網路前輩們的努力推廣吧～小輩的我就先暫時觀望吧^^|||

Posted by taikobo0 at 10:06 │回應(0) │引用(0) │新知
 [1] 
回頁首▲