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 = $('p.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>; $('p.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>
相关推荐：
如何用js和 jquery实现无限加载页面
基于javascript实现移动端无限加载分页的示例代码分享
vue.js实现无限加载与分页功能开发
以上就是实例讲解ajax实现列表无限加载的详细内容。