jQuery und Ajax implementieren eine teilweise Aktualisierung-js-Tutorial-php.cn

jQuery und Ajax implementieren eine teilweise Aktualisierung

小云云

Freigeben： 2018-01-10 10:22:09

Original

1801 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich zwei verschiedene Methoden von jQuery und Ajax vorgestellt, um eine teilweise Aktualisierung zu erreichen. In Projekten wird Ajax häufig verwendet, um beispielsweise eine teilweise Aktualisierung zu implementieren, z. B. Front-End- und Back-End-Interaktion usw. Hier Wir teilen zwei Methoden zur teilweisen Aktualisierung. Die Methode verwendet hauptsächlich .load() in Ajax. Interessierte Freunde sollten gemeinsam einen Blick darauf werfen.

Der erste Typ:

Wenn mehrere Seiten die gleiche Kopfzeile, Navigation und das gleiche Ende haben, klicken Sie auf den Navigationslink, um zwischen mehreren Seiten zu wechseln. Der Effekt ist der folgende Wenn Sie auf den Link klicken, wird nur der Inhaltsteil umgeschaltet und die anderen Teile werden nicht neu geladen. Erweitern Sie den 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>

Nach dem Login kopieren

Hinweis: Die Codes von jq-load2.html, jq-load3.html und jq-load.html sind grundsätzlich gleich, nur in das p von #container Der hier angezeigte Inhalt ist unterschiedlich.

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
});

Nach dem Login kopieren

Hinweis: Diese Methode verwendet einige neue Tags in HTML5, deren Erstellung in js nicht noch einmal beschrieben wird.

Zweiter Typ:

Wenn sich auf der linken Seite der Webseite eine Liste befindet, klicken Sie auf die Liste, um den Inhalt auf der rechten Seite zu wechseln , es ist nicht für Tabs geeignet. Es ist am besten, .load() zum lokalen Aktualisieren zu verwenden. Erweitern Sie den 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>

Nach dem Login kopieren

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);
});

Nach dem Login kopieren

user_center.html:

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

Nach dem Login kopieren

Hinweis: other user_xxx. Die HTML-Seite ist auch der Inhalt, der der Liste entspricht, daher werde ich hier nicht auf Details eingehen.

Zusammenfassung:

Die Prinzipien der beiden oben genannten Methoden sind die gleichen. Bitte beachten Sie, dass Ajax in einer Serverumgebung ausgeführt werden muss. Durch Vergleich kann festgestellt werden, dass der erste relativ einfach ist und der zweite etwas komplizierter ist. Ich persönlich empfehle jedoch den ersten, um zu sehen, wie .load() ist Tatsächlich spielt es eine wichtige Rolle für die Benutzererfahrung. Wenn Sie beispielsweise darauf klicken, ändert sich die Adresse in der Adressleiste nicht. Dies kann später implementiert werden. Die zweite Methode ist flexibler in der Anwendung. Sie nutzt geschickt die benutzerdefinierten Attribute von data-*, um Daten zu speichern. Da sich die Adresse geändert hat, bleibt der aktuelle Seiteninhalt beim Aktualisieren erhalten Wechsel zum ersten.

Verwandte Empfehlungen:

Ajax implementiert eine Teilaktualisierungs-Anmeldeschnittstelle mit Bestätigungscode

JQuery-Ajax-Teilaktualisierungsbeispiel

Von jsp+ajax implementierter teilweiser Aktualisierungsüberprüfungscode (Onblur-Ereignis löst Überprüfung aus)

Das obige ist der detaillierte Inhalt vonjQuery und Ajax implementieren eine teilweise Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!