欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery pjax 應(yīng)用簡(jiǎn)單示例

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

ajax缺點(diǎn)是破壞了瀏覽器的前進(jìn)后退，因?yàn)閍jax的請(qǐng)求不會(huì)留在歷史記錄中。pjax就不一樣了，pjax被解釋成ajax+pushState的封裝，因?yàn)樗補(bǔ)jax的請(qǐng)求寫(xiě)入歷史記錄，并反映在地址欄，這樣用戶就能愉快地使用前進(jìn)后退了。pjax有好幾個(gè)實(shí)現(xiàn)方法，這里使用最常用的Jquery庫(kù)，使用jquery.pjax.js。演示代碼的服務(wù)器端使用PHP腳本語(yǔ)言。

Pjax用在那兒？就說(shuō)百度云盤(pán)吧，這個(gè)大家肯定都用過(guò)。百度云盤(pán)PC端，在點(diǎn)擊打開(kāi)某個(gè)文件夾后會(huì)打開(kāi)這個(gè)文件夾下的文件，其實(shí)顯示文件的這個(gè)div就用到了pjax技術(shù)。地址欄變換，內(nèi)容更換，但是卻是一個(gè)ajax請(qǐng)求。等到后退的時(shí)候，不必重新請(qǐng)求上一層文件夾的內(nèi)容，因?yàn)槭谴嬖谠跉v史記錄中的。而且，開(kāi)發(fā)者還可以選擇時(shí)候使用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">第一頁(yè)</a>.<a href="res2.php">第二頁(yè)</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>

服務(wù)器端：

res1.php


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

res2.php

<?php 
echo "<div style='background:red;'>第二頁(yè)</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">第一頁(yè)</a>.<a href="res2.php">第二頁(yè)</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>

服務(wù)器端代碼：

res3.php:

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

源碼：jQuery pjax

總結(jié)：

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

您可能感興趣的文章:

相關(guān)文章

最新評(píng)論