Ajax實現列表無限載入和二級下拉選項效果

NO IMAGE

Ajax做列表無限載入和Ajax做二級下拉選項,供大家參考,具體內容如下


//欄目Ajax做載入
public function ajaxlist(){
//echo "http://www.域名.com/index.php?a=Index&c=Index&m=ajaxlist";
//echo "<hr>";
$data = Q('sum');
$where = array();
$where['cid'] = 33;
$rongyuList = M('content')->limit($data,2)->where($where)->select();
$data['stat'] = 1;
$data = $rongyuList;
$this->ajax($data);
//也可以手動把想要的欄位拼接成字串 
/*echo "[";
foreach($rongyuList as $k){
echo "{"."\""."title"."\"".":"."\"".$k['title']."\"".","."\""."description"."\"".":"."\"".$k['description']."\"".","."\""."cid"."\"".":"."\"".$k['cid']."\""."}".",";  
}
echo "]";*/
}

具體頁面實現:


<script type='text/javascript'>
/*ajax*/
(function(){
//傳送資料 
var url = "__WEB__" "?a=Index&c=Index&m=ajaxlist";
var oSum = ''; 
$('a.ajaxBut').click(function(){
oSum = $('div.zizhiListContBox>a').size();
$.post(url,{sum:oSum},function(result){
console.log(result);
eval("var info=" result);
for(var key in info){
oStr = "<a href='" "__WEB__" "?a=Index&c=Index&m=content&mid=1&cid=33&aid=" info[key]['aid'] "" "'><h3 class='f100 f16 ts500'>" info[key]['title'] "</h3><p>" info[key]['description'] "</p><span class='b parb'></span></a>";
$('div.zizhiListContBox').append(oStr);
};
});
});
})();
</script>

Ajax 做二級選項:


<!-- 示例:HTML -->
<dl class="pr keshi" >
<dt class="pa">科室:</dt>
<dd class="pa">
<select name='keshi' class='m_keshi'>
<option value='0'>--請選擇科室--</option>
</select>
<select name='zhuanjia' class='m_zhuanjia'>
<option>--請選擇專家--</option>
</select>
</dd>
</dl>

示例控制器:


//示例控制器
/* Ajax請求欄目列表 */
public function ajaxlanmu(){
$lanmuList = M('category')->where('pid=142')->select();
$this->ajax($lanmuList);
}
public function ajaxzhuanjia(){
$where = array();
$data = Q('sum');
$data = $data ? $data : 143;
$where['cid'] = $data;
$zhuanjiaList = M('guahao')->where($where)->select();
$this->ajax($zhuanjiaList);
}

示例:JS


<script>
(function(){
var lanmuUrl = "__WEB__" "?a=Index&c=Index&m=ajaxlanmu";
var zhuanjiaUrl = "__WEB__" "?a=Index&c=Index&m=ajaxzhuanjia";
var oSum = oStr = oStr2 = oVal = oKong = info2 = oCid = '';
/* lanmu */
$.post(lanmuUrl,function(result){
eval("var info=" result);
for(var key in info){oStr  = "<option value='" info[key]['catname'] "' cid='" info[key]['cid'] "'>" info[key]['catname'] "</option>";};
$('dl.keshi').find('select.m_keshi').append(oStr);
});
/* zhuanjia */
$('dl.keshi').find('select.m_keshi').change(function(){
oVal = $(this).find('option:selected').val();
if(oVal == 0){
$('dl.zhuanjia').find('select.m_zhuanjia').html("<option>--請選擇專家--</option>");
}else{
oCid = $(this).find('option:selected').attr('cid');
$.post(zhuanjiaUrl,{sum:oCid},function(result){
eval("info2=" result);
oStr2 = '';//注意這裡要清空第一次請求的資料
for(var key2 in info2){
oStr2  = "<option value='" info2[key2]['title'] "'>" info2[key2]['title'] "</option>";    
};
$('dl.zhuanjia').find('select.m_zhuanjia').html(oStr2);
});
};
});
})();
</script>