recherche

Maison >interface Web >js tutoriel >jQuery et ajax implémentent une actualisation partielle

jQuery et ajax implémentent une actualisation partielle

小云云
小云云original
2018-01-10 10:22:091857parcourir

Cet article partage principalement avec vous deux méthodes différentes de jQuery et ajax pour obtenir un rafraîchissement partiel. Dans les projets, ajax est souvent utilisé, par exemple pour implémenter un rafraîchissement partiel, comme l'interaction front-end et back-end, etc. nous partageons deux méthodes de rafraîchissement partiel. La méthode utilise principalement .load() en ajax. Les amis intéressés peuvent y jeter un œil ensemble.

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 basculer entre plusieurs pages. À ce moment, vous voulez L'effet est qu'après. en cliquant sur le lien, seule la partie contenu est commutée et les autres parties 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 les mêmes, uniquement dans le p de #container Le contenu affiché ici 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 changer le contenu sur le côté droit. , il ne convient pas aux onglets. Il est préférable d'utiliser .load() pour actualiser localement. 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. Rechargez une certaine partie de la page via .load(). Veuillez noter qu'ajax doit s'exécuter dans un environnement de 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. 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.

Recommandations associées :

Ajax implémente une interface de connexion à actualisation partielle avec code de vérification

Exemple d'actualisation partielle JQuery ajax

Code de vérification d'actualisation partielle implémenté par jsp+ajax (l'événement onblur déclenche la vérification)

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：Méthode simple pour implémenter la loupe avec jqueryArticle suivant：Méthode simple pour implémenter la loupe avec jquery

Articles Liés

Voir plus