昨天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);
哈，這樣就清楚多了呢！當然昨天用字串組的方式也可以囉，其所達到的效果是一樣的啦！提供另一種思考方向^^
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);
哈，這樣就清楚多了呢！當然昨天用字串組的方式也可以囉，其所達到的效果是一樣的啦！提供另一種思考方向^^
文章標籤
全站熱搜
不好意思的請問一下: 我改了你的code之後還是無法抓到第二層的資料,應該說action端抓不到前端的值,我改的地方有加上和加上的name,以及修改後端的一些變數,如$action和$parentId等...但是還是無法運作...可以請你指導一下還有哪些地方有遺漏的嗎
你好～因為你提供的資訊有點少，我一時之間看不出來那裡有問題。建議你可以參考前篇的回應看看有沒有遺漏的地方；或是利用 print_r($_POST);exit; 看看 action.php 是不是真的有接到值；或是印出 SQL ，看看語法有沒有錯誤的地方。希望這樣能解決你的問題～^^
我想我表達的不好,我現在的問題是,第一層的值傳不到第二層,讓第二層的選項跑不出來...目前為止我第一層的東西可以跑了但是點選一個值後,理論上...第二層應該會出現選項,但是選單沒有出現,不知道這是哪邊出了差錯,麻煩一下,謝謝
我了解你遇到的問題，但是沒有錯誤訊息我實在不太能幫你解決...請利用自設的中斷除錯： 1. 在 action.php，利用 print_r($_POST);exit; 看看你傳的值 action.php 是不是真的有收到（建議用 firefox 的 firebug 除錯） 2. 值確定有傳入，在看看 SQL 語法是不是有錯誤；利用 echo 印出你的查詢 SQL，在丟到 phpMyAdmin 看有沒有錯誤訊息。 先從這二個方向試試看吧～
謝謝您的回應,我找到我的問題了. 其實我的問題癥結點在於我沒有裝jquery的相關函數庫. 去把需要的東西弄上去後1->2就OK了.2->3的功能跟我想要的有點出入,但是我看了您提供網站的code裡面的chained功能然後修一下應該就可以了. 再次感謝
It is perfect time to make some plans for the future and it’s time to be happy. I have read this post and if I could I desire to suggest you few interesting things or advice. Perhaps you could write next articles referring to this article. I wish to read more things about it!