suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie die Teilaktualisierungsfunktion mit jQuery+ und Ajax

So implementieren Sie die Teilaktualisierungsfunktion mit jQuery+ und Ajax

php中世界最好的语言
php中世界最好的语言Original
2018-04-25 15:07:011655Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie die Teilaktualisierungsfunktion mit jQuery+ und Ajax implementieren. Was sind die Vorsichtsmaßnahmen für jQuery+ und Ajax, um die Teilaktualisierungsfunktion zu implementieren? Schauen Sie mal rein.

Wenn bestimmte Seiten die gleiche Kopfzeile,

Navigation und Unterseite haben, kann durch Klicken auf den Navigationslink zwischen mehreren Seiten gewechselt werden. Der gewünschte Effekt besteht zu diesem Zeitpunkt darin, erst danach auf den Link zu klicken Der Inhaltsteil wird umgeschaltet und die anderen 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>
Hinweis: Die Codes von jq-load2.html, jq-load3.html und jq-load.html sind grundsätzlich die gleich, nur in Der im p von #container 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
});
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 einzuschalten Die rechte Seite ist zu groß und für Tabs nicht geeignet. Verwenden Sie zu diesem Zeitpunkt am besten .load(), um sie teilweise zu aktualisieren. 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>
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>
Hinweis: Andere user_xxx.html-Seiten werden ebenfalls aufgeführt. Der entsprechende Inhalt wird hier nicht wiederholt.

Zusammenfassung:

Die Prinzipien der beiden oben genannten Methoden sind die gleichen. Laden Sie einen bestimmten Teil der Seite über .load() neu. Bitte beachten Sie, dass Ajax in einer Serverumgebung ausgeführt werden muss. Durch Vergleich kann festgestellt werden, dass das erste relativ einfach ist und das zweite etwas komplizierter ist. Ich persönlich empfehle jedoch das erste, um ein Beispiel zu geben, 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 verwendet geschickt das benutzerdefinierte

-Attribut , um Daten zu speichern. Da sich die Adresse geändert hat, bleibt sie erhalten beim Aktualisieren des Seiteninhalts beibehalten, anstatt zum ersten zu wechseln.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Ajax-Benutzerauthentifizierung und -Registrierung

So implementieren Sie die Ajax-Ladezeitüberschreitungsaufforderung

Fortschritt während der Ajax-Anfrage anzeigen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Teilaktualisierungsfunktion mit jQuery+ und Ajax. 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：So gehen Sie mit Daten um, nachdem Ajax die Aktualisierung verloren hatNächster Artikel：So gehen Sie mit Daten um, nachdem Ajax die Aktualisierung verloren hat

In Verbindung stehende Artikel

Mehr sehen