ThinkPHP使用心得分享-ThinkPHP + Ajax 實現(xiàn)2級聯(lián)動下拉菜單
首先是數(shù)據(jù)庫的設計。分類表叫cate.
我做的是分類數(shù)據(jù)的二級聯(lián)動,數(shù)據(jù)需要的字段有:id,name(中文名),pid(父id).
父id的設置: 若數(shù)據(jù)沒有上一級,則父id為0,若有上級,則父id為上一級的id。
數(shù)據(jù)庫有內容后,就可以開始寫代碼,進行二級聯(lián)動的實現(xiàn)。
先在后臺php獲取所有pid為0的數(shù)據(jù),保存到$cate中,然后在第一層的<select>中用foreach循環(huán)輸出。
Html代碼:
<select name="type" size="1" id="type">
<option>請選擇類型</option>
<foreach name='cate' item='v'>
<option value="{$v['ca_id']}">{$v.ca_name}</option>
</foreach>
</select>
標簽:
<select name="lable" size="1" id="lables">
</select>
Ajax代碼:
$('#type').click(function(){
$(this).change(function(){
var objectModel = {};
var value = $(this).val();
var type = $(this).attr('id');
objectModel[type] =value;
$.ajax({
cache:false,
type:"POST",
url:site.web+"lable",
dataType:"json",
data:objectModel,
timeout:30000,
error:function(){
alert(site.web+"lable");
},
success:function(data){
$("#lables").empty();
var count = data.length;
var i = 0;
var b="";
for(i=0;i<count;i++){
b+="<option value='"+data[i].ca_id+"'>"+data[i].ca_name+"</option>";
}
$("#lables").append(b);
}
});
});
}
);
Ajax代碼在第一層類型改變后觸發(fā),ajax方法的主要參數(shù)有
1.url:后臺接收ajax的地址;
2.data:傳到后臺的數(shù)據(jù),一般用json傳遞;這里傳遞的是選中類的id值。
3.type:傳遞方法,有get和post方法,我一般用post,可以傳輸?shù)臄?shù)據(jù)比get多,安全性也高些;
4.error:ajax執(zhí)行失敗的方法;
5.success:ajax執(zhí)行成功的方法,也就是回調函數(shù)。這里在執(zhí)行success時,我先用empty()清空了第二個下拉菜單的內容,然后再輸出從后臺獲取的數(shù)據(jù)。
下面是Thinkphp接收ajax數(shù)據(jù)并處理的頁面
//后臺ajax驗證
$result = array();
$cate =$_POST['type'];
$result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select();
$this->ajaxReturn($result,"JSON");
Thinkphp的I()方法其實可以看成$_POST[],這樣來獲取ajax傳遞過來的第一層選中內容的id,接著,獲取其子類,然后用ajaxReturn()返回給ajax,這里設置了返回數(shù)據(jù)以json形式,所以ajax會以json形式接收到數(shù)據(jù)
原生php的返回數(shù)據(jù)方式:
//搜索結果為$result
.....
echo json_encode($result);
這樣就完成了2級聯(lián)動下拉菜單的實現(xiàn),需要注意的是,url得保證正確,后臺接收到也需要有返回值,不然ajax也不會執(zhí)行success方法的。
- thinkphp實現(xiàn)面包屑導航(當前位置)例子分享
- ThinkPHP+EasyUI之ComboTree中的會計科目樹形菜單實現(xiàn)方法
- thinkPHP實現(xiàn)的聯(lián)動菜單功能詳解
- thinkPHP基于ajax實現(xiàn)的菜單與分頁示例
- ThinkPHP無限級分類原理實現(xiàn)留言與回復功能實例
- thinkphp實現(xiàn)無限分類(使用遞歸)
- ThinkPHP自動填充實現(xiàn)無限級分類的方法
- ThinkPHP實現(xiàn)遞歸無級分類——代碼少
- 使用ThinkPHP的自動完成實現(xiàn)無限級分類實例詳解
- tp5框架前臺無限極導航菜單類實現(xiàn)方法分析
相關文章
PHP 在5.1.* 和5.2.*之間 PDO數(shù)據(jù)庫操作中的不同之處小結
今天發(fā)現(xiàn)php5.1.*和php5.2.*在數(shù)據(jù)庫預編譯代碼執(zhí)行的時候出現(xiàn)差異2012-03-03
php中time()與$_SERVER[REQUEST_TIME]用法區(qū)別
這篇文章主要介紹了php中time()與$_SERVER[REQUEST_TIME]用法區(qū)別,詳細分析了time()與$_SERVER[REQUEST_TIME]的用法,并以實例形式對比總結了二者在獲取當前系統(tǒng)時間戳與請求時間戳的區(qū)別,需要的朋友可以參考下2014-11-11

