jQuery + Ajax implementiert eine teilweise Aktualisierung-js-Tutorial-php.cn

jQuery + Ajax implementiert eine teilweise Aktualisierung

巴扎黑

Freigeben： 2017-06-26 14:34:00

Original

1392 Leute haben es durchsucht

In Projekten wird Ajax häufig verwendet, um beispielsweise eine teilweise Aktualisierung zu erreichen, z. B. Front-End- und Back-End-Interaktion usw. Hier teilen wir zwei Methoden der teilweisen Aktualisierung, wobei wir hauptsächlich .load () in Ajax verwenden.

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 navigieren Der gewünschte Effekt besteht zu diesem Zeitpunkt darin, dass der Inhaltsteil erst nach dem Klicken auf den Link gewechselt wird und die anderen Teile nicht neu geladen werden. Erweitern Sie den Code.

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>

Nach dem Login kopieren

Hinweis: jq-load2.html, jq-load3.html und Der Code von jq-load.html ist grundsätzlich derselbe, nur der im div von #container angezeigte Inhalt ist unterschiedlich.

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

Nach dem Login kopieren

Hinweis: Diese Methode verwendet einige neue Tags in HTML5. Es ist nicht einfach, sie in js zu erstellen . Wieder.

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 gibt zu viele, daher ist es nicht für Registerkarten geeignet. Zu diesem Zeitpunkt ist es am besten, .load() zum lokalen Aktualisieren zu verwenden. Erweitern Sie den Code.

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>

Nach dem Login kopieren

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 =

Nach dem Login kopieren

user_center.html:

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

Nach dem Login kopieren

Hinweis: Auch andere user_xxx.html-Seiten entsprechen der Liste und werden hier nicht noch einmal beschrieben.

Zusammenfassung:

Die Prinzipien der beiden oben genannten Methoden sind die gleichen. Bitte beachten Sie, dass Ajax dies tun muss in der Serverumgebung ausgeführt werden. 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. 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 Der Erste.

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