Heim > Artikel > Web-Frontend > jQuery + Ajax implementiert eine teilweise Aktualisierung

jQuery + Ajax implementiert eine teilweise Aktualisierung

巴扎黑Original: 2017-06-26 14:34:001446Durchsuche

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>

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

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>

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 =

user_center.html:

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery-Methode zum Ausblenden von divNächster Artikel：jQuery-Methode zum Ausblenden von div

In Verbindung stehende Artikel

Mehr sehen