如何使用jquery.pjax實(shí)現(xiàn)SPA單頁(yè)面應(yīng)用

本篇內(nèi)容主要講解“如何使用jquery.pjax實(shí)現(xiàn)SPA單頁(yè)面應(yīng)用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何使用jquery.pjax實(shí)現(xiàn)SPA單頁(yè)面應(yīng)用”吧!

今天我要給大家分享的這個(gè)實(shí)例是模擬分頁(yè)功能，分頁(yè)是在web開(kāi)發(fā)中最常見(jiàn)的組件之一。正常情況下，點(diǎn)擊分頁(yè)組件中的頁(yè)面，頁(yè)面會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面，而使用Pjax后，點(diǎn)擊頁(yè)碼時(shí)，會(huì)發(fā)送一個(gè)ajax請(qǐng)求到后端，響應(yīng)后更新對(duì)應(yīng)的頁(yè)面內(nèi)容部分，同時(shí)地址欄url也對(duì)應(yīng)實(shí)際的頁(yè)碼url，但整個(gè)頁(yè)面并沒(méi)有跳轉(zhuǎn)，給我們的感覺(jué)是非常流暢，當(dāng)然，我們也可以在請(qǐng)求頁(yè)面異步時(shí)增加加載動(dòng)畫(huà)效果。來(lái)看具體的使用方法。

HTML

我們準(zhǔn)備一個(gè)加載p#loading,默認(rèn)隱藏，ajax請(qǐng)求的時(shí)候才顯示。#container是用來(lái)加載響應(yīng)的頁(yè)面內(nèi)容。.pagination是分頁(yè)條組件。

<p class="row">    <p id="loading">Loading...</p>    <p id="container">jQuery.pjax分頁(yè)</p>    <nav>      <ul class="pagination">        <li><a href="data.php?p=1">1</a></li>        <li><a href="data.php?p=2">2</a></li>        <li><a href="data.php?p=3">3</a></li>        <li><a href="data.php?p=4">4</a></li>        <li><a href="data.php?p=5">5</a></li>      </ul>    </nav> </p>

Javascript

我們使用的pjax組件依賴(lài)jQuery庫(kù)，所以先將這兩個(gè)文件加載。

<script src="jquery-2.0.0.min.js"></script> <script src="jquery.pjax.js"></script>

然后，使用以下代碼調(diào)用pjax插件。

$(document).pjax('.pagination a', '#container'); $(document).on('pjax:send', function() {  $('#loading').show(); }) $(document).on('pjax:complete', function() {  $('#loading').hide(); })

上面的代碼中，我們告訴pjax監(jiān)聽(tīng)一個(gè)標(biāo)簽和使用 #container 作為目標(biāo)容器：

$(document).pjax('.pagination a', '#container');

現(xiàn)在在pjax兼容瀏覽器，點(diǎn)擊分頁(yè)條上的頁(yè)碼，網(wǎng)頁(yè)的內(nèi)容容器 #container 中的內(nèi)容將被 data.php?p=x 的內(nèi)容替換。

data.php的內(nèi)容我們簡(jiǎn)單的寫(xiě)個(gè)代碼，實(shí)際開(kāi)發(fā)中應(yīng)該是讀取數(shù)據(jù)庫(kù)中的數(shù)據(jù)列表。

$p = intval($_GET['p']); if($p==0) $p=1; echo '這是第'.$p.'頁(yè)';

選項(xiàng)與事件

pjax的調(diào)用方法我們剛才簡(jiǎn)單介紹了，它還可以設(shè)置一些選項(xiàng)用來(lái)定制。格式如下：

$(document).pjax(selector, [container], options)

selector 是一個(gè)字符串，比如要點(diǎn)擊的文本 event delegation.

container 是一個(gè)字符串，選擇唯一標(biāo)識(shí)pjax容器。

options 下面所描述的一個(gè)對(duì)象。

參數(shù)描述默認(rèn)值timeoutAjax超時(shí)毫秒之后完全強(qiáng)制刷新650push使用 pushState 在導(dǎo)航中添加瀏覽器歷史記錄truereplace更換網(wǎng)址不添加瀏覽器歷史記錄falsemaxCacheLength大緩存大小為以前的容器內(nèi)容20version一個(gè)字符串或函數(shù)返回當(dāng)前pjax版 scrollTo垂直位置以滾動(dòng)導(dǎo)航。為了避免改變滾動(dòng)位置，通過(guò)設(shè)置為 false.0type網(wǎng)頁(yè)請(qǐng)求的方式"GET"dataType返回的數(shù)據(jù)類(lèi)型"html"containerCSS選擇器的元素，其中的內(nèi)容應(yīng)及時(shí)更換 url字符串或函數(shù)返回的URL ajax請(qǐng)求link.hreftarget最終 relatedTarget 的值，通過(guò) pjax eventslinkfragmentCSS選擇器的碎片從Ajax響應(yīng)提取 

事件方法

事件描述pjax:click阻止一個(gè)鏈接的默認(rèn)事件，防止阻止pjax事件pjax:beforeSend參見(jiàn) XHR headerspjax:start請(qǐng)求開(kāi)始pjax:send發(fā)送請(qǐng)求pjax:clickedpjax后，已經(jīng)得到了從點(diǎn)擊一個(gè)鏈接開(kāi)始pjax:beforeReplace在內(nèi)容被替換前，HTML從服務(wù)器加載的內(nèi)容pjax:success在內(nèi)容被替換后，HTML 內(nèi)容從服務(wù)器加載pjax:timeout在選項(xiàng) options.timeout;之后除非取消，否則將很難刷新pjax:error一個(gè)ajax錯(cuò)誤，將執(zhí)行原始的網(wǎng)頁(yè)刷新，直到網(wǎng)頁(yè)加載被取消pjax:complete總是在pjax執(zhí)行完成以后調(diào)用，不論運(yùn)行的結(jié)果pjax:end請(qǐng)求結(jié)束pjax:popstate瀏覽器前進(jìn)后退事件 direction 屬性：”back”/”forward”

$.pjax還能響應(yīng)點(diǎn)擊事件，以及提交表單和重新加載事件。詳情請(qǐng)參考jquery.pjax項(xiàng)目地址：https://github.com/defunkt/jquery-pjax

到此，相信大家對(duì)“如何使用jquery.pjax實(shí)現(xiàn)SPA單頁(yè)面應(yīng)用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！