recherche

Maison >interface Web >js tutoriel >Comment implémenter la fonction de rafraîchissement partiel avec jQuery+ et ajax

Comment implémenter la fonction de rafraîchissement partiel avec jQuery+ et ajax

php中世界最好的语言
php中世界最好的语言original
2018-04-25 15:07:011621parcourir

Cette fois, je vais vous montrer comment implémenter la fonction de rafraîchissement partiel avec jQuery+ et ajax. Quelles sont les précautions pour jQuery+ et ajax pour implémenter la fonction de rafraîchissement partiel. Ce qui suit est un cas pratique, voyons. jetez un oeil.

Lorsque certaines pages ont le même en-tête, navigation et en bas, cliquer sur le lien de navigation peut basculer entre plusieurs pages. A ce moment, l'effet souhaité est de cliquer sur le lien Ensuite, uniquement. la partie contenu est commutée et les autres ne sont pas rechargées. Remontez le code.

jq-load.html : 

<!DOCTYPE html>
<html>
 <head>
  <title>ajax局部刷新</title>
 </head>
 <body>
  <header>
   <nav>
    <a href="jq-load.html" rel="external nofollow" class="current">首页</a>
    <a href="jq-load2.html" rel="external nofollow" >新闻资讯</a>
    <a href="jq-load3.html" rel="external nofollow" >用户中心</a>
   </nav>
  </header>
  <section id="content">
   <p id="container">
     首页的内容
   </p>
  </section>
  <script src="js/jquery-1.11.0.min.js"></script>
  <script src="js/jq-load.js"></script>
 </body>
</html>

Remarque : Les codes de jq-load2.html, jq-load3.html et jq-load.html sont fondamentalement le même. Seul le contenu affiché dans le p de #container est différent.

jq-load.js : 

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

Remarque : Cette méthode utilise de nouvelles balises en html5. Leur création en js ne sera pas décrite à nouveau.

Deuxième type :

S'il y a une liste sur le côté gauche de la page Web, cliquez sur la liste pour activer le contenu le côté droit. Il y a trop de contenu et ne convient pas aux onglets. Pour le moment, il est préférable d'utiliser .load() pour actualiser partiellement. Remontez le code.

user.html : 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>个人中心</title>
    <meta charset="utf-8">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/user.js"></script>
  </head>
  <body>
    <p class="userWrap">
      <ul class="userMenu">
        <li class="current" data-id="center">用户中心</li>
        <li data-id="account">账户信息</li>
        <li data-id="trade">交易记录</li>
        <li data-id="info">消息中心</li>
      </ul>
      <p id="content"></p>
    </p>
  </body>
</html>

user.js : 

$(function(){
  $(".userMenu").on("click", "li", function(){
    var sId = $(this).data("id"); //获取data-id的值
    window.location.hash = sId; //设置锚点
    loadInner(sId);
  });
  function loadInner(sId){
    var sId = window.location.hash;
    var pathn, i;
    switch(sId){
      case "#center": pathn = "user_center.html"; i = 0; break;
　　　　　　　case "#account": pathn = "user_account.html"; i = 1; break;
      case "#trade": pathn = "user_trade.html"; i = 2; break;
      case "#info": pathn = "user_info.html"; i = 3; break;
　　　　　　 default: pathn = "user_center.html"; i = 0; break;
    }
    $("#content").load(pathn); //加载相对应的内容
    $(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮
  }
  var sId = window.location.hash;
  loadInner(sId);
});

user_center.html : 

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

Remarque : autre utilisateur_xxx. La page html est également le contenu correspondant à la liste, je n'entrerai donc pas dans les détails ici.

Résumé :

Les principes des deux méthodes ci-dessus sont les mêmes. Veuillez faire attention, ajax doit fonctionner dans un environnement serveur. 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 dans son application. Elle utilise intelligemment l'attribut personnalisé de data-* pour stocker les données. Lorsque vous cliquez, le point d'ancrage est modifié. L'adresse actuelle sera toujours modifiée. conservé lors de l'actualisation du contenu de la page au lieu de passer au premier.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'authentification et de l'enregistrement des utilisateurs Ajax

Comment implémenter l'invite de délai de chargement Ajax

Afficher la progression lors de la requête Ajax

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!

Déclaration：
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
Article précédent：Comment gérer les données après la perte d'actualisation d'AjaxArticle suivant：Comment gérer les données après la perte d'actualisation d'Ajax

Articles Liés

Voir plus