Ajax to implement infinite loading of lists and secondary drop-down menu options (with code)

This time I will bring you Ajax (with code) to implement infinite loading of lists and secondary drop-down menu options. Use Ajax to implement unlimited loading of lists and secondary drop-down menu options. Note What are the matters? Below are practical cases. Let’s take a look.

Ajax does unlimited loading of lists and Ajax does secondary drop-down options, for your reference, the specific content is as follows

//栏目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 "]";*/
 }

Specific page implementation:

<script type=&#39;text/javascript&#39;>
/*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=&#39;"+"WEB"+"?a=Index&c=Index&m=content&mid=1&cid=33&aid="+info[key][&#39;aid&#39;]+""+"&#39;><h3 class=&#39;f100 f16 ts500&#39;>"+info[key]['title']+"</h3><p>"+info[key]['description']+"</p><span class=&#39;b parb&#39;></span></a>";
   $('p.zizhiListContBox').append(oStr);
 };
 });
});
})();
</script>

Ajax does secondary options:

<!-- 示例：HTML -->
<dl class="pr keshi" >
 <dt class="pa">科室：</dt>
 <dd class="pa">
  <select name=&#39;keshi&#39; class=&#39;m_keshi&#39;>
   <option value=&#39;0&#39;>--请选择科室--</option>
  </select>
  <select name=&#39;zhuanjia&#39; class=&#39;m_zhuanjia&#39;>
   <option>--请选择专家--</option>
  </select>
 </dd>
</dl>

Example controller:

//示例控制器
/* 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);
}

Example: 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=&#39;"+info[key][&#39;catname&#39;]+"&#39; cid=&#39;"+info[key][&#39;cid&#39;]+"&#39;>"+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=&#39;"+info2[key2][&#39;title&#39;]+"&#39;>"+info2[key2]['title']+"</option>";    
   };
   $('dl.zhuanjia').find('select.m_zhuanjia').html(oStr2);
  });
 };
});
})();
</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website !

Recommended reading:

How Ajax+php performs data interaction and refreshes partial pages

Ajax method to implement Form form Submission method

The above is the detailed content of Ajax to implement infinite loading of lists and secondary drop-down menu options (with code). For more information, please follow other related articles on the PHP Chinese website!