recherche

Maison >interface Web >js tutoriel >Résumé de l'exemple simple jQuery pjax

Résumé de l'exemple simple jQuery pjax

小云云
小云云original
2018-01-17 14:04:222217parcourir

pjax est un plugin jQuery qui utilise ajax et pushState pour obtenir une expérience de navigation rapide, y compris de vrais permaliens, des titres de page et des boutons de retour en arrière. Cet article partage principalement avec vous un résumé d'exemples simples de jQuery pjax, dans l'espoir de vous aider.

L'inconvénient d'ajax est qu'il détruit le mouvement avant et arrière du navigateur, car les requêtes ajax ne resteront pas dans l'historique. pjax est différent. pjax est interprété comme un package ajax+pushState, car il écrit les requêtes ajax dans l'historique et les reflète dans la barre d'adresse, afin que les utilisateurs puissent les utiliser en avant et en arrière. Il existe plusieurs méthodes d'implémentation pour pjax. La bibliothèque jQuery la plus couramment utilisée est utilisée ici, en utilisant jquery.pjax.js. Le côté serveur du code de démonstration utilise le langage de script PHP.

Où Pjax est-il utilisé ? Parlons de Baidu Cloud Disk, tout le monde a dû l'utiliser. Du côté PC de Baidu Cloud Disk, lorsque vous cliquez pour ouvrir un dossier, le fichier dans le dossier sera ouvert. En fait, le p qui affiche le fichier utilise la technologie pjax. La barre d'adresse change et le contenu change, mais c'est une requête ajax. Lorsque vous revenez en arrière, vous n'avez pas besoin de redemander le contenu du dossier de niveau supérieur car il existe dans l'historique. De plus, les développeurs peuvent également choisir d’utiliser le cache et la mise en cache du stockage.

Exemple 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>";

Explication :

$(document).pjax('a', '#Container') où a est l'élément déclencheur, #container est le conteneur qui charge le contenu renvoyé par pjax, il en va de même ci-dessous.

Exemple 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>

Code côté serveur :

res3.php :


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

Trois applications complètes

window.history.pushState(state, title, url);
// https://developer.mozilla .org/zh-CN/docs/Web/API/History/pushState
// Objet @State : Un objet supplémentaire qui enregistre des points historiques, peut être vide.
// @Titre de la page : Actuellement, tous les navigateurs ne le sont pas. pris en charge.
// @URL facultative : le navigateur ne vérifiera pas si l'URL existe, modifiera uniquement l'URL. L'URL doit être dans le même domaine et ne peut pas traverser de domaines.

PJAX est. en fait une fenêtre HTML5 .history.pushState(state, title, url) Cette nouvelle API plus la technologie AJAX traditionnelle est généralement utilisée pour réaliser le chargement de page sans actualisation. La fonction principale de pushState est de modifier l'URL et d'ajouter un historique de retour. AJAX se charge sans actualisation Après avoir terminé la page, l'utilisateur peut toujours revenir en arrière et avancer normalement, et window.history.back() et window.history.forward() de JS peuvent également fonctionner normalement. Ce qui suit est un chargement de page sans actualisation. pushState + jQuery AJAX Les navigateurs qui ne le prennent pas en charge reviendront automatiquement au formulaire d'ouverture de lien d'origine

index.php:


<!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>

data. .php :


<?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 } ?>

Notez que le code des statistiques JS doit être placé dans le bloc principal pour compter correctement le nombre de visites de page.

Exemple 2 : 


<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>

Code du serveur


if(is_pjax()){ 
  $this->display(&#39;article_pjax&#39;); 
}else{ 
  $this->display(&#39;article&#39;); 
}


//判断是否是pjax请求 
function is_pjax(){ 
  return array_key_exists(&#39;HTTP_X_PJAX&#39;, $_SERVER) && $_SERVER[&#39;HTTP_X_PJAX&#39;]; 
}

L'idée principale est que lorsque .pjax clique, remplacez le contenu de #pjax-container par le contenu demandé. Lors du traitement back-end, il est nécessaire de déterminer s'il s'agit d'une requête pjax. S'il s'agit d'un rendu partiel, sinon tout le rendu est requis.

Étant donné que pjax utilise la technologie HTML5, si le navigateur ne prend pas en charge Html5, le site Web sautera normalement s'il le prend en charge, il n'effectuera qu'un rendu partiel (mais l'URL dans la barre d'adresse du navigateur. suivra normalement le lien a pour apporter des modifications).

Notez que dans le code js ci-dessus, il y a un paramètre scrollTo:false lors de la configuration de pjax. L'ajout de ce paramètre signifie que la barre de défilement de la page Web ne changera pas après avoir cliqué sur la connexion sans ce paramètre. , à chaque fois que vous cliquez sur La fenêtre de navigation sautera automatiquement en haut de la page Web

Résumé : Pjax renvoie en fait un extrait de code du serveur sans rafraîchir la page, et modifie en même temps l'adresse url, ce qui peut économiser le chargement des ressources et améliorer la vitesse de chargement des pages.

Pièce jointe : adresse du projet github de pjaxhttps://github.com/defunkt/jquery-pjax

Recommandations associées :

Quoi est Pjax

Utilisation de Pjax dans Laravel 5.1

Problème d'actualisation PJAX de la barre de navigation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter $.fn et les effets de défilement d'image dans jqueryArticle suivant：Comment implémenter $.fn et les effets de défilement d'image dans jquery

Articles Liés

Voir plus