Ajax realizes infinite loading of lists and secondary drop-down option effects-JS Tutorial-php.cn

Ajax realizes infinite loading of lists and secondary drop-down option effects

亚连

Release： 2018-05-22 10:57:51

Original

1388 people have browsed it

This article mainly introduces Ajax to achieve infinite loading of lists and the effect of secondary drop-down options in detail. It has certain reference value. Interested friends can refer to

Ajax to achieve unlimited loading of lists. Make secondary drop-down options with Ajax 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(&#39;sum&#39;);
 $where = array();
 $where[&#39;cid&#39;] = 33;
 $rongyuList = M(&#39;content&#39;)->limit($data,2)->where($where)->select();
 $data[&#39;stat&#39;] = 1;
 $data = $rongyuList;
 $this->ajax($data);
 //也可以手动把想要的字段拼接成字符串 
 /*echo "[";
 foreach($rongyuList as $k){
  echo "{"."\""."title"."\"".":"."\"".$k[&#39;title&#39;]."\"".","."\""."description"."\"".":"."\"".$k[&#39;description&#39;]."\"".","."\""."cid"."\"".":"."\"".$k[&#39;cid&#39;]."\""."}".",";  
 }
 echo "]";*/
 }

Copy after login

Specific page implementation:

<script type=&#39;text/javascript&#39;>
/*ajax*/
(function(){
//发送数据 
var url = "__WEB__"+"?a=Index&c=Index&m=ajaxlist";
var oSum = &#39;&#39;; 
$(&#39;a.ajaxBut&#39;).click(function(){
 oSum = $(&#39;p.zizhiListContBox>a&#39;).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][&#39;title&#39;]+"</h3><p>"+info[key][&#39;description&#39;]+"</p><span class=&#39;b parb&#39;></span></a>";
   $(&#39;p.zizhiListContBox&#39;).append(oStr);
 };
 });
});
})();
</script>

Copy after login

Ajax makes 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>

Copy after login

Example controller:

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

Copy after login

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 = &#39;&#39;;
/* 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][&#39;catname&#39;]+"</option>";};
 $(&#39;dl.keshi&#39;).find(&#39;select.m_keshi&#39;).append(oStr);
});
/* zhuanjia */
$(&#39;dl.keshi&#39;).find(&#39;select.m_keshi&#39;).change(function(){
 oVal = $(this).find(&#39;option:selected&#39;).val();
 if(oVal == 0){
  $(&#39;dl.zhuanjia&#39;).find(&#39;select.m_zhuanjia&#39;).html("<option>--请选择专家--</option>");
 }else{
  oCid = $(this).find(&#39;option:selected&#39;).attr(&#39;cid&#39;);
  $.post(zhuanjiaUrl,{sum:oCid},function(result){
   eval("info2="+result);
   oStr2 = &#39;&#39;;//注意这里要清空第一次请求的数据
   for(var key2 in info2){
    oStr2 += "<option value=&#39;"+info2[key2][&#39;title&#39;]+"&#39;>"+info2[key2][&#39;title&#39;]+"</option>";    
   };
   $(&#39;dl.zhuanjia&#39;).find(&#39;select.m_zhuanjia&#39;).html(oStr2);
  });
 };
});
})();
</script>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

ajaxwith cross-domain jsonp

django via ajax Methods for completing email user registration and activating accounts

Detailed explanation of the use of get and post methods of nativeajax

The above is the detailed content of Ajax realizes infinite loading of lists and secondary drop-down option effects. For more information, please follow other related articles on the PHP Chinese website!