suchen

Heim >Web-Frontend >js-Tutorial >Zusammenfassung eines einfachen jQuery-Pjax-Beispiels

Zusammenfassung eines einfachen jQuery-Pjax-Beispiels

小云云
小云云Original
2018-01-17 14:04:222213Durchsuche

pjax ist ein jQuery-Plugin, das Ajax und PushState verwendet, um ein schnelles Surferlebnis zu erreichen, einschließlich echter Permalinks, Seitentitel und funktionierender Zurück-Schaltflächen. In diesem Artikel wird hauptsächlich eine Zusammenfassung einfacher Beispiele für jQuery Pjax mit Ihnen geteilt, in der Hoffnung, allen zu helfen.

Der Nachteil von Ajax besteht darin, dass es die Vorwärts- und Rückwärtsbewegung des Browsers zerstört, da Ajax-Anfragen nicht im Verlauf bleiben. Pjax ist anders. Pjax wird als Paket von Ajax + PushState interpretiert, da es Ajax-Anfragen in den Verlauf schreibt und sie in der Adressleiste widerspiegelt, sodass Benutzer problemlos vorwärts und rückwärts verwenden können. Es gibt mehrere Implementierungsmethoden für pjax. Die am häufigsten verwendete jQuery-Bibliothek wird hier verwendet: jquery.pjax.js. Die Serverseite des Democodes verwendet die Skriptsprache PHP.

Wo wird Pjax verwendet? Reden wir über Baidu Cloud Disk, das muss jeder schon einmal genutzt haben. Wenn Sie auf der PC-Seite von Baidu Cloud Disk zum Öffnen eines Ordners klicken, wird die Datei im Ordner geöffnet. Tatsächlich verwendet das p, das die Datei anzeigt, die Pjax-Technologie. Die Adressleiste ändert sich und der Inhalt ändert sich, es handelt sich jedoch um eine Ajax-Anfrage. Wenn Sie zurückgehen, müssen Sie den Inhalt des Ordners der oberen Ebene nicht erneut anfordern, da er im Verlauf vorhanden ist. Darüber hinaus können Entwickler auch die Verwendung von Cache- und Speicher-Caching wählen.

Beispiel 1, 


<!DOCTYPE html>
<html>
<head>
 <title>pjax</title>
  <meta charset="utf-8">
</head>
<body>
 <h1>My Site</h1>
 <p>
  Go to <a href="res1.php" rel="external nofollow" >第一页</a>.<a href="res2.php" rel="external nofollow" >第二页</a>
 </p>
 <p id="container"></p>  
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax(&#39;a&#39;, &#39;#container&#39;)
</script>
</html>

res1.php


<?php 
echo "<p style=&#39;background:red;&#39;>第一页</p>";

res2. php


<?php 
echo "<p style=&#39;background:red;&#39;>第二页</p>";

Erklärung:

$(document).pjax('a', '#Container') wobei a das Triggerelement ist, #container der Container ist, der den von pjax zurückgegebenen Inhalt lädt, Das Gleiche gilt auch unten.

Beispiel 2, 


<!DOCTYPE html>
<html>
<head>
 <title>pjax</title>
  <meta charset="utf-8">
</head>
<body>
 <h1>My Site</h1>
 <p>
  <input type="button" id="clickMe" value="GO">
 </p>
 <p id="container"></p>  
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
  $(&#39;#clickMe&#39;).click(function(){
    $.pjax({
      url: &#39;./res3.php&#39;,
      container: &#39;#container&#39;
    });
  });
});
</script>
</html>

Serverseitiger Code:

res3.php:


<?php 
echo "<p style=&#39;background:red;&#39;>第三页</p>";

Drei umfassende Anwendungen

window.history.pushState(state, title, url);
// https://developer.mozilla .org/zh-CN/docs/Web/API/History/pushState
// @State-Objekt: Ein zusätzliches Objekt, das historische Punkte aufzeichnet, kann leer sein.
// @Page-Titel: Derzeit nicht in allen Browsern unterstützt.
// @Optionale URL: Der Browser prüft nicht, ob die URL existiert, sondern ändert nur die URL. Die URL muss sich in derselben Domäne befinden und darf nicht domänenübergreifend sein.

PJAX ist Eigentlich HTML5-Fenster .history.pushState(state, title, url) Diese neue API plus traditionelle AJAX-Technologie wird im Allgemeinen verwendet, um das Laden von Seiten ohne Aktualisierung zu erreichen. Die Hauptfunktion von pushState besteht darin, die URL zu ändern und den Rückgabeverlauf hinzuzufügen. AJAX wird ohne Aktualisierung geladen. Nach Abschluss der Seite kann der Benutzer weiterhin normal vor- und zurückblättern, und window.history.back() und window.history.forward() von JS können auch normal funktionieren. Das Folgende ist ein Seitenladen ohne Aktualisierung pushState + jQuery AJAX. Browser, die es nicht unterstützen, kehren automatisch zum ursprünglichen Link-Öffnungsformular zurück .php:


Beachten Sie, dass der JS-Statistikcode im Hauptblock platziert werden sollte, um die Anzahl der Seitenbesuche richtig zu zählen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<script src="jquery.js"></script>
</head>
<body>
<p id="main">
  <a href="data.php" rel="external nofollow" >data.php</a>
  <script>
  $(document).ready(function() {
    $(&#39;#main&#39;).on(&#39;click&#39;,&#39;a&#39;,function(e) {
      if(window.history.pushState) {
        e.preventDefault(); //不跟随原链接跳转
        url = $(this).attr(&#39;href&#39;);
        $.ajax({
          async: true,
          type: &#39;GET&#39;,
          url: &#39;data.php&#39;,
          data: &#39;pjax=1&#39;,
          success: function(data) {
            window.history.pushState(null, null, url); //改变URL和添加返回历史
            document.title = data.title; //设置标题
            $(&#39;#main&#39;).html(data.main); //设置内容
          }
        });
      } else {
        return; //低版本IE8等不支持HTML5 pushState,直接返回进行链接跳转
      }
    });
  });
  </script>
</p>
</body>
</html>

Beispiel 2: 


<?php
if(isset($_GET[&#39;pjax&#39;])) {
  //PJAX请求返回JSON
  $arr[&#39;title&#39;] = &#39;Data&#39;;
  $arr[&#39;main&#39;] = &#39;<h1>Data Content</h1>&#39;;
  //下面这两句是把PHP数组转成JSON对象返回
  header(&#39;Content-Type: application/json; charset=utf-8&#39;);
  echo json_encode($arr);
} else {
  //常规请求返回HTML
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data</title>
<script src="jquery.js"></script>
</head>
<body>
<p id="main"><h1>Data Content</h1></p>
</body>
</html>
<?php } ?>

Servercode


<p class="body"> 
  <?php $action_name = $Think.ACTION_NAME; ?> 
 
  <!-- 头部哟 --> 
  <?php if ($action_name == &#39;news&#39;): ?> 
    <include file="Brand:header_news" /> 
  <?php elseif ($action_name == &#39;forum&#39;): ?> 
    <include file="Brand:header_forum" /> 
  <?php endif; ?> 
 
  <!-- 资讯的二级分类 --> 
  <p class="cb"></p> 
  <p class="brand-news-nav pjax"> 
    <ul class="clearfix"> 
      <li <?php if($_GET[&#39;cat&#39;] == &#39;&#39;) echo &#39;class="selected"&#39;; ?>><a class="first" href="{:U("Brand/$action_name")}">全部</a></li> 
      <volist name="cat_list" id="vo" key="i"> 
        <li <?php if($_GET[&#39;cat&#39;] == $vo[&#39;id&#39;]) echo &#39;class="selected"&#39;; ?>><a href="{:U("Brand/$action_name",array(&#39;cat&#39;=>$vo[&#39;id&#39;]))}">{$vo.name}</a></li> 
      </volist> 
    </ul> 
  </p> 
 
  <script type="text/javascript"> 
    $(function(){ 
      $(document).pjax(&#39;.pjax a&#39;, &#39;#pjax-container&#39;,{ 
        type:&#39;post&#39;, 
        scrollTo:false, 
      }); 
      $(document).on(&#39;pjax:click&#39;, function() { 
        enable_loading = false; 
      }) 
      $(document).on(&#39;pjax:send&#39;, function(){ 
        var str = "<p class=&#39;tc mt-10&#39;>加载中...</p>"; 
        $(&#39;#pjax-container&#39;).html(str); 
      }) 
 
      //最后一个右侧加边框 
      $(".brand-news-nav ul li").last().children(&#39;a&#39;).addClass(&#39;last&#39;); 
      $(".brand-news-nav ul li").click(function(){ 
        $(this).addClass(&#39;selected&#39;).siblings().removeClass(&#39;selected&#39;); 
      }) 
    }) 
  </script> 
 
  <!-- 文章列表页 --> 
  <p class="wrap clearfix"> 
    <p class="brand-news-list fl" id="pjax-container"> 
      <include file="Brand:article_pjax" /> 
    </p> 
    <p class="brand-news-right fr pb-20"> 
      <a href="{$adv3[0][&#39;url&#39;]}"><img class="scrollLoading" data-url="{$adv3[0][&#39;images&#39;]|showImagePath}" src="__PUBLIC__/index/images/loading270x160.gif" width="260" height="150"></a> 
      <p class="title mt-10">法律支持</p> 
      <ul class="bgc-fff"> 
        <volist name="law_list" id="vo"> 
          <a href="{:U(&#39;law&#39;,array(&#39;id&#39;=>$vo[&#39;id&#39;]))}"><li>{$vo.name}</li></a> 
        </volist> 
      </ul> 
      <button class="btn btn-right mt-10 btn-consult">免费咨询</button> 
      <script type="text/javascript"> 
        $(function(){ 
          //最后一个需要添加一个last的样式 
          $(".brand-news-right li:last").addClass(&#39;last&#39;); 
        }) 
      </script> 
    </p> 
  </p> 
</p>

Die Hauptidee besteht darin, beim Klicken auf .pjax den Inhalt des #pjax-Containers durch den angeforderten Inhalt zu ersetzen. Während der Back-End-Verarbeitung muss festgestellt werden, ob es sich um eine Pjax-Anfrage handelt, ob ein teilweises Rendering erforderlich ist und ob kein vollständiges Rendering erforderlich ist. 

if(is_pjax()){ 
  $this->display(&#39;article_pjax&#39;); 
}else{ 
  $this->display(&#39;article&#39;); 
}
Da pjax die HTML5-Technologie verwendet, springt die Website normal, wenn sie HTML5 nicht unterstützt. Wenn sie dies unterstützt, führt sie nur ein teilweises Rendering durch (aber die URL in der Adressleiste des Browsers). Normalerweise folgen Sie dem Link a, um Änderungen vorzunehmen.


Beachten Sie, dass es im obigen js-Code einen Parameter scrollTo:false gibt. Das Hinzufügen dieses Parameters bedeutet, dass sich die Bildlaufleiste der Webseite nach dem Klicken auf die Verbindung nicht ändert , jedes Mal, wenn Sie klicken, springt das Browserfenster automatisch zum Anfang der Webseite 
//判断是否是pjax请求 
function is_pjax(){ 
  return array_key_exists(&#39;HTTP_X_PJAX&#39;, $_SERVER) && $_SERVER[&#39;HTTP_X_PJAX&#39;]; 
}

Zusammenfassung: Pjax gibt tatsächlich einen Codeausschnitt vom Server zurück, ohne die Seite zu aktualisieren, und ändert gleichzeitig auch die URL-Adresse , wodurch das Laden von Ressourcen eingespart und die Geschwindigkeit beim Laden von Seiten verbessert werden kann.

Anhang: Github-Projektadresse von pjax

https://github.com/defunkt/jquery-pjax

Verwandte Empfehlungen:

Was ist Pjax

Verwendung von Pjax in Laravel 5.1

Navigationsleiste PJAX-Aktualisierungsproblem

Das obige ist der detaillierte Inhalt vonZusammenfassung eines einfachen jQuery-Pjax-Beispiels. 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 implementieren Sie $.fn- und Bildlaufeffekte in JQueryNächster Artikel：So implementieren Sie $.fn- und Bildlaufeffekte in JQuery

In Verbindung stehende Artikel

Mehr sehen