Maison > interface Web > js tutoriel > le corps du texte

Ajax réalise un chargement infini de listes et des effets d'options déroulantes secondaires

亚连
Libérer: 2018-05-22 10:57:51
original
1378 Les gens l'ont consulté

Cet article présente principalement Ajax pour obtenir un chargement infini de listes et l'effet des options déroulantes secondaires en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Ajax pour obtenir un chargement illimité de listes. . Créez des options déroulantes secondaires avec Ajax pour votre référence. Le contenu spécifique est le suivant

//栏目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 "]";*/
 }
Copier après la connexion

Implémentation de page spécifique :

<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>
Copier après la connexion

Ajax crée des options secondaires :

<!-- 示例: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>
Copier après la connexion

Exemple de contrôleur :

//示例控制器
/* 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);
}
Copier après la connexion

Exemple : 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>
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

ajax et jsonp inter-domaines

django via ajax Comment terminer l'enregistrement de l'utilisateur de messagerie et activer le compte

Explication détaillée de l'utilisation des méthodes get et post de ajax natif

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal