jQuery+ajax implémente une actualisation partielle-js tutoriel-php.cn

jQuery+ajax implémente une actualisation partielle

巴扎黑

Libérer： 2017-06-26 14:34:00

original

1478 Les gens l'ont consulté

Dans les projets, ajax est souvent utilisé, par exemple pour obtenir un rafraîchissement partiel, comme une interaction front-end et back-end, etc. Nous partageons ici deux méthodes de rafraîchissement partiel, utilisant principalement .load() en ajax.

Le premier type :

Lorsque plusieurs pages ont le même en-tête, la même navigation et le même bas, cliquez sur le lien de navigation pour naviguer entre plusieurs pages. la page, l'effet recherché à ce moment est de changer la partie contenu uniquement après avoir cliqué sur le lien, et les autres parties ne seront pas rechargées. Code vers le haut.

jq-load.html :

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <title>ajax局部刷新</title> 5   </head> 6   <body> 7  8     <header> 9       <nav>10         <a href="jq-load.html" class="current">首页</a>11         <a href="jq-load2.html">新闻资讯</a>12         <a href="jq-load3.html">用户中心</a>13       </nav>14     </header>15 16     <section id="content">17       <div id="container">18           首页的内容19       </div>20     </section>21 22     <script src="js/jquery-1.11.0.min.js?1.1.11"></script>23     <script src="js/jq-load.js?1.1.11"></script>24 25   </body>26 </html>

Copier après la connexion

Remarque : jq-load2.html, jq-load3.html et Le code de jq-load.html est fondamentalement le même, seul le contenu affiché dans le div de #container est différent.

jq-load.js :

 1 $('nav a').on('click', function(e) {                 
 2   e.preventDefault();  // 阻止链接跳转 3   var url = this.href;  // 保存点击的地址 4  5   $('nav a.current').removeClass('current');    
 6   $(this).addClass('current');                       
 7  8   $('#container').remove();                          
 9   $('#content').load(url + ' #container').fadeIn('slow'); // 加载新内容,url地址与该地址下的选择器之间要有空格,表示该url下的#container10 });

Copier après la connexion

Remarque : Cette méthode utilise de nouvelles balises en html5. Il n'est pas facile de les créer en js. . Encore.

Deuxième type :

S'il y a une liste sur le côté gauche de la page Web, cliquez sur la liste pour changer le contenu sur le côté droit. Il y en a trop, donc cela ne convient pas aux onglets. Pour le moment, il est préférable d'utiliser .load() pour actualiser localement. Code vers le haut.

user.html :

 1 <!DOCTYPE html> 2 <html lang="en"> 3     <head> 4         <title>个人中心</title> 5         <meta charset="utf-8"> 6         <script src="js/jquery-1.11.0.min.js?1.1.11"></script> 7         <script src="js/user.js?1.1.11"></script> 8     </head> 9     <body>10 11         <div class="userWrap">17             <ul class="userMenu">18                 <li class="current" data-id="center">用户中心</li>19                 <li data-id="account">账户信息</li>20                 <li data-id="trade">交易记录</li>21                 <li data-id="info">消息中心</li>22             </ul>23             <div id="content"></div>25         </div>26         27     </body>28 </html>

Copier après la connexion

user.js :

$(".userMenu").on("click", "li",  sId = $().data("id");  window.location.hash = sId;   sId = "#center": pathn = "user_center.html"; i = 0;  "#account": pathn = "user_account.html"; i = 1;  "#trade": pathn = "user_trade.html"; i = 2;  "#info": pathn = "user_info.html"; i = 3; : pathn = "user_center.html"; i = 0; "#content").load(pathn); $(".userMenu li").eq(i).addClass("current").siblings().removeClass("current");  sId =

Copier après la connexion

user_center.html :

<div>用户中心
    ……</div>

Copier après la connexion

Remarque : D'autres pages user_xxx.html correspondent également à la liste et ne seront pas décrites à nouveau ici.

Résumé :

Les principes des deux méthodes ci-dessus sont les mêmes. Rechargez une certaine partie de la page via .load(). être dans l’environnement serveur exécuté ci-dessous. Par comparaison, on peut constater que le premier est relativement simple et le second est légèrement plus compliqué. Cependant, je recommande personnellement le second. Le premier sert principalement à donner un exemple pour voir comment fonctionne .load(). utilisé.En fait, il joue un rôle important dans l'expérience utilisateur.Par exemple, lorsque vous cliquez, l'adresse dans la barre d'adresse ne change pas, ce qui rend l'avant et l'arrière invalides. La deuxième méthode est plus flexible. Elle utilise intelligemment les attributs personnalisés de data-* pour stocker les données. Lorsque vous cliquez, le point d'ancrage est modifié, le contenu actuel de la page sera toujours conservé lors de l'actualisation au lieu de passer à. Le premier.

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!