如何使用jquery.pjax實現SPA單頁面應用

本篇內容主要講解“如何使用jquery.pjax實現SPA單頁面應用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何使用jquery.pjax實現SPA單頁面應用”吧!

今天我要給大家分享的這個實例是模擬分頁功能，分頁是在web開發中最常見的組件之一。正常情況下，點擊分頁組件中的頁面，頁面會跳轉到對應的頁面，而使用Pjax后，點擊頁碼時，會發送一個ajax請求到后端，響應后更新對應的頁面內容部分，同時地址欄url也對應實際的頁碼url，但整個頁面并沒有跳轉，給我們的感覺是非常流暢，當然，我們也可以在請求頁面異步時增加加載動畫效果。來看具體的使用方法。

HTML

我們準備一個加載p#loading,默認隱藏，ajax請求的時候才顯示。#container是用來加載響應的頁面內容。.pagination是分頁條組件。

<p class="row">    <p id="loading">Loading...</p>    <p id="container">jQuery.pjax分頁</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組件依賴jQuery庫，所以先將這兩個文件加載。

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

然后，使用以下代碼調用pjax插件。

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

上面的代碼中，我們告訴pjax監聽一個標簽和使用 #container 作為目標容器：

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

現在在pjax兼容瀏覽器，點擊分頁條上的頁碼，網頁的內容容器 #container 中的內容將被 data.php?p=x 的內容替換。

data.php的內容我們簡單的寫個代碼，實際開發中應該是讀取數據庫中的數據列表。

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

選項與事件

pjax的調用方法我們剛才簡單介紹了，它還可以設置一些選項用來定制。格式如下：

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

selector 是一個字符串，比如要點擊的文本 event delegation.

container 是一個字符串，選擇唯一標識pjax容器。

options 下面所描述的一個對象。

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

事件方法

事件描述pjax:click阻止一個鏈接的默認事件，防止阻止pjax事件pjax:beforeSend參見 XHR headerspjax:start請求開始pjax:send發送請求pjax:clickedpjax后，已經得到了從點擊一個鏈接開始pjax:beforeReplace在內容被替換前，HTML從服務器加載的內容pjax:success在內容被替換后，HTML 內容從服務器加載pjax:timeout在選項 options.timeout;之后除非取消，否則將很難刷新pjax:error一個ajax錯誤，將執行原始的網頁刷新，直到網頁加載被取消pjax:complete總是在pjax執行完成以后調用，不論運行的結果pjax:end請求結束pjax:popstate瀏覽器前進后退事件 direction 屬性：”back”/”forward”

$.pjax還能響應點擊事件，以及提交表單和重新加載事件。詳情請參考jquery.pjax項目地址：https://github.com/defunkt/jquery-pjax

到此，相信大家對“如何使用jquery.pjax實現SPA單頁面應用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！