ThinkPHP使用心得分享-ThinkPHP + Ajax 實現(xiàn)2級聯(lián)動下拉菜單
首先是數(shù)據(jù)庫的設(shè)計。分類表叫cate.
我做的是分類數(shù)據(jù)的二級聯(lián)動,數(shù)據(jù)需要的字段有:id,name(中文名),pid(父id).
父id的設(shè)置: 若數(shù)據(jù)沒有上一級,則父id為0,若有上級,則父id為上一級的id。
數(shù)據(jù)庫有內(nèi)容后,就可以開始寫代碼,進行二級聯(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:傳遞方法,有g(shù)et和post方法,我一般用post,可以傳輸?shù)臄?shù)據(jù)比get多,安全性也高些;
4.error:ajax執(zhí)行失敗的方法;
5.success:ajax執(zhí)行成功的方法,也就是回調(diào)函數(shù)。這里在執(zhí)行success時,我先用empty()清空了第二個下拉菜單的內(nèi)容,然后再輸出從后臺獲取的數(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傳遞過來的第一層選中內(nèi)容的id,接著,獲取其子類,然后用ajaxReturn()返回給ajax,這里設(shè)置了返回數(shù)據(jù)以json形式,所以ajax會以json形式接收到數(shù)據(jù)
原生php的返回數(shù)據(jù)方式:
//搜索結(jié)果為$result
.....
echo json_encode($result);
這樣就完成了2級聯(lián)動下拉菜單的實現(xiàn),需要注意的是,url得保證正確,后臺接收到也需要有返回值,不然ajax也不會執(zhí)行success方法的。
- thinkphp實現(xiàn)面包屑導(dǎo)航(當前位置)例子分享
- ThinkPHP+EasyUI之ComboTree中的會計科目樹形菜單實現(xiàn)方法
- thinkPHP實現(xiàn)的聯(lián)動菜單功能詳解
- thinkPHP基于ajax實現(xiàn)的菜單與分頁示例
- ThinkPHP無限級分類原理實現(xiàn)留言與回復(fù)功能實例
- thinkphp實現(xiàn)無限分類(使用遞歸)
- ThinkPHP自動填充實現(xiàn)無限級分類的方法
- ThinkPHP實現(xiàn)遞歸無級分類——代碼少
- 使用ThinkPHP的自動完成實現(xiàn)無限級分類實例詳解
- tp5框架前臺無限極導(dǎo)航菜單類實現(xiàn)方法分析
相關(guān)文章
PHP中uploaded_files函數(shù)使用方法詳解
PHP uploaded_files函數(shù)的功能非常強大,希望通過這篇文章中介紹的內(nèi)容能夠幫助我們解決相關(guān)問題,提高我們對PHP語言的了解程度。2011-03-03PHP字符串與數(shù)組處理函數(shù)用法小結(jié)
這篇文章主要介紹了PHP字符串與數(shù)組處理函數(shù)用法,結(jié)合實例形式詳細分析了PHP字符串與數(shù)組常用處理函數(shù)功能、定義、使用方法與操作注意事項,需要的朋友可以參考下2020-01-01php中的四舍五入函數(shù)代碼(floor函數(shù)、ceil函數(shù)、round與intval)
php 中處理浮點數(shù)時經(jīng)常要需要四舍五入。在php 中有兩個函數(shù)適用于這種情況:floor函數(shù)、ceil函數(shù)和round函數(shù)2014-07-07微信自定義菜單的創(chuàng)建/查詢/取消php示例代碼
這篇文章主要為大家詳細介紹了微信自定義菜單的創(chuàng)建/查詢/取消php示例代碼,感興趣的小伙伴們可以參考一下2016-08-08PHP頁面跳轉(zhuǎn)操作實例分析(header方法)
這篇文章主要介紹了PHP頁面跳轉(zhuǎn)操作,結(jié)合實例形式對比分析了HTML跳轉(zhuǎn)與php使用header方法跳轉(zhuǎn)的相關(guān)操作技巧與注意事項,并給出了一個跳轉(zhuǎn)的封裝函數(shù)供大家參考,需要的朋友可以參考下2016-09-09