亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery pjax 應用簡單示例

 更新時間：2018年09月20日 14:18:06   作者：mislav  
此篇文章給大家分享了jQuery pjax 應用的一些簡單示例，希望可以幫助到大家

ajax缺點是破壞了瀏覽器的前進后退，因為ajax的請求不會留在歷史記錄中。pjax就不一樣了，pjax被解釋成ajax+pushState的封裝，因為它把ajax的請求寫入歷史記錄，并反映在地址欄，這樣用戶就能愉快地使用前進后退了。pjax有好幾個實現(xiàn)方法，這里使用最常用的Jquery庫，使用jquery.pjax.js。演示代碼的服務器端使用PHP腳本語言。

Pjax用在那兒？就說百度云盤吧，這個大家肯定都用過。百度云盤PC端，在點擊打開某個文件夾后會打開這個文件夾下的文件，其實顯示文件的這個div就用到了pjax技術(shù)。地址欄變換，內(nèi)容更換，但是卻是一個ajax請求。等到后退的時候，不必重新請求上一層文件夾的內(nèi)容，因為是存在在歷史記錄中的。而且，開發(fā)者還可以選擇時候使用cache和storage緩存。

DEMO1：

客戶端：

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

服務器端：

res1.php


<?php 
echo "<div style='background:red;'>第一頁</div>";

res2.php

<?php 
echo "<div style='background:red;'>第二頁</div>";

解釋：$(document).pjax('a', '#container')其中a是觸發(fā)元素，#container是裝載pjax返回內(nèi)容的容器，下面也是這樣。

DEMO2：

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

客戶端：

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

服務器端代碼：

res3.php:

<?php 
echo "<div style='background:red;'>第三頁</div>";

源碼：jQuery pjax

總結(jié)：

 此篇文章總結(jié)了一些大家常見的jQuery pjax 應用示例，喜歡的同學可以參考借鑒一下。

您可能感興趣的文章:

相關(guān)文章

最新評論