首頁>ASP源碼>其他類別
下載

自動Pjax

Pjax.js是一個 jQuery 外掛程式腳本，它使用 ajax、 pushState並自動偵測連結和表單，對於設定頁面，您需要在所有頁面中使用id="pjax-container" ，例如： 

 < div id =" pjax-container " >
    ...
</ div >

Pjax 從頁面載入所有內容，但使用pjax-container僅使用第一個元素的內容，如果您不需要特定連結或表單中的 Pjax，則使用data-pjax-ignore屬性，例如： 

 < p >
    Hello world!
    Example < a data-pjax-ignore href =" /page.html " > page </ a > .
</ p >

設定

包含庫

 < link rel =" stylesheet " type =" text/css " href =" pjax.min.css " data-pjax-resource =" true " >
< script src =" pjax.min.js " > </ script >

或使用CDN： 

 < link rel =" stylesheet " type =" text/css " href =" https://cdn.jsdelivr.net/npm/[email protected]/pjax.min.css " data-pjax-resource =" true " >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/pjax.min.js " > </ script >

注意：CSS是可選的，您可以建立自己的載入器或使用CSS自訂以下結構（該結構由Pjax.js產生）： 

 < div class =" pjax-loader pjax-start pjax-inload pjax-end pjax-hide " >
    < div class =" pjax-progress " > </ div >
</ div >

進口： 

 const Pjax = require ( 'pjax.js' ) ;

...

ESM/ES6 導入： 

 import Pjax from 'pjax.js' ;

...

需要JS： 

 requirejs ( [ 'folder/foo/bar/pjax' ] , function ( Pjax ) {
    ...
} ) ;

支援

pjax.js支援連結、具有方法GET表單、具有方法POST表單以及支援檔案和多個檔案 ( <input type="file" multiple> )。

要求：

  • DOMParser或document.implementation
  • pushState 、 replaceState和popstate （DOM 歷史操作）
  • FormData (XMLHttpRequest Level 2) - 如果需要使用 PJAX 上傳檔案 ( enctype="multipart/form-data" )

測試於：

  • 網際網路瀏覽器 10
  • 火狐瀏覽器
  • 谷歌瀏覽器
  • iOS 10
  • 安卓2.3+

用法

使用： 

 Pjax . start ( ) ;

Pjax API

方法描述
Pjax.supported如果支援該庫則傳回true ，否則傳回false
Pjax.remove();刪除 PJAX 請求和事件
Pjax.on(event, function (...) {...});定義一個事件
Pjax.off(event, function (...) {...});刪除事件
Pjax.request(url[, config])使用腳本請求

Pjax.request()方法

config參數是可選的，你可以這樣定義： 

 Pjax.request("/foo/bar", {
    method: "POST",
    replace: true,
    data: "foo=1&bar=2&baz=3"
});

上傳文件： 

 const formdata = new FormData;
const blob = new Blob(["Hello World!"], {
  type: "text/plain"
});

formdata.append("file", blob, "hello.txt");

Pjax.request("/foo/bar", {
    method: "POST",
    replace: true,
    data: formdata
});

使用data:

財產類型預設描述
replace: bool false設定歷史狀態模式，如果將其設為false （或省略），它將使用history.pushState() ，但如果將其設為true它將使用history.replaceState() 。
method: string GET定義 HTTP 方法
data: bool false要在請求中傳送數據，可以使用String或FormData

Pjax活動

例子描述
Pjax.on("initiate", function (url, config) {...});點擊連結或提交表單或執行Pjax.request()方法時觸發
Pjax.on("done", function (url, status) {...});頁面載入時觸發， status回傳HTTP程式碼
Pjax.on("fail", function (url, status) {...});頁面載入失敗時觸發， status回傳HTTP code
Pjax.on("then", function (url) {...});每次請求完成時執行，即使失敗或成功
Pjax.on("history", function (url, stateData) {...});執行每次使用後退或前進
Pjax.on("handler", function (data, config, callbackDone, callbackFail) {...});建立您的所有者對 Pjax.js 請求的回應
Pjax.on("dom", function (url, newdocument) {...});允許您手動操作元素更改，例如您可以建立過渡或更改新文檔

提示：您可以使用Pjax.on("dom", ...);用於移除 DOM 中的事件

Pjax 配置

財產類型預設描述
containers: array [ "#pjax-container" ]通知要更新頁面上的哪些元素
updatecurrent: bool false如果為true執行目前頁面使用的相同 url 的請求history.replaceState ，否則不會執行任何操作
updatehead: bool true 「pjax.js」有一個智慧更新系統，有助於避免「閃爍」效果，因為它不會更新所有內容，它只會更新已更改的內容，但是，如果您確定分頁時不會發生任何更改，當您可以設定它設定為 false 時，唯一會繼續更新的將是<title>標籤
insertion: string undefined支援值append和prepend ，如果省略它將替換內容
scrollLeft: number 0透過 PJAX 載入頁面後，您可以定義scrollLeft 應捲動的位置。設定-1以停用 x-cord 中的自動滾動
scrollTop: number 0透過 PJAX 載入頁面後，您可以定義scrollTop 應捲動的位置。設定-1以停用 y 軸自動滾動
loader: bool true新增原生Pjax載入器，如果你想建立自己的載入器，請將其設定為false
nocache: bool false防止快取
proxy: string ""設定網路代理
formSelector: string form:not([data-pjax-ignore]):not([action^='javascript:'])設定表單選擇器，設定為空以防止表單使用Pjax
linkSelector: string a:not([data-pjax-ignore]):not([href^='#']):not([href^='javascript:'])設定表單選擇器，設定為空以防止連結使用Pjax
headers: object新增自訂標頭，例如： { "foo": "bar", "test": "baz" }

具有 HTML5 資料屬性的 PJAX

如果需要覆寫特定連結或表單的屬性，您可以使用 HTML 屬性進行設定：

財產相等的例子描述
data-pjax-containers containers: <a href="..." data-pjax-containers="[ &quot;#foo&quot;, &quot;#bar&quot;, &quot;#baz&quot; ]"當請求來自特定表單或連結時調整容器
data-pjax-updatehead updatehead: <a href="..." data-pjax-updatehead="false"當請求來自特定表單或連結時允許/禁止頭標籤更新
data-pjax-insertion insertion <a href="..." data-pjax-insertion="append"將資料附加或新增至容器而不是更新
data-pjax-scroll-left scrollLeft: <form action="..." data-pjax-scroll-left="10"自訂向左捲動到特定表單或鏈接
data-pjax-scroll-top scrollTop: <form action="..." data-pjax-scroll-top="-1"自訂滾動頂部到特定表單或鏈接
data-pjax-loader loader: <a href="..." data-pjax-loader="false"允許/禁止載入程式動畫到特定的表單或鏈接
data-pjax-done - <a href="..." data-pjax-done="console.log('success', this);"自訂“完成”事件到特定表單或鏈接
data-pjax-fail - <a href="..." data-pjax-fail="console.log('error', this);"自訂“錯誤”事件到特定表單或鏈接
data-pjax-ignore - <a href="..." data-pjax-ignore="true">正常導航到特定表單或鏈接
data-pjax-resource - <link href="..." data-pjax-resource="true">防止更新 DOM 後刪除元素（目前僅適用於<head> ）

對於更改配置，請像這樣使用： 

 Pjax . start ( {
    containers : [ "#my-container" ] , //Change container element
    scrollLeft : - 1 , //Disable autoscroll
    scrollTop : - 1 //Disable autoscroll
} ) ;

更新兩個（或更多）元素

您可以更改要更新的元素，甚至添加更多元素，例如： 

 < div id =" navbar " >
    ...
</ div >
< div id =" my-container " >
    ...
</ div >
< script >
Pjax . start ( {
    containers : [ "#navbar" , "#my-container" ] //Change containers element
} ) ;
</ script >

您可以變更initiate事件中的配置，例如： 

 < div id =" pjax-container " >
    < div id =" filter " >
        < form >
            ...
        </ form >
    </ div >
    < div id =" search-container " >
        ...
    </ div >
</ div >
< script >
Pjax . start ( ) ;

Pjax . on ( "initiate" , function ( url , configs ) {
    if ( url . indexOf ( "/search/" ) === 0 && window . location . href . indexOf ( "/search/" ) === 0 ) {
        configs . containers = [ "#search-container" ] ;
    }
} ) ;
</ script >

如果您在產品搜尋頁面上進行新搜索，而不是更新整個容器，則只會更新產品所在的元素，其他頁面將繼續更新整個容器。

伺服器端的 Pjax

可以使用請求標頭偵測請求是否來自 PJAX：

標頭描述
X-PJAX表示該頁面是透過 PJAX 請求的
X-PJAX-Container通知使用的容器選擇器

使用 PHP 的範例： 

 if ( isset ( $ _SERVER [ ' HTTP_X_PJAX ' ])) {
    echo ' You using pjax ' ;
}

使用 PJAX 重定向

您可以在後端使用 HTTP 回應標頭X-PJAX-URL來強制 Pjax.js 重新導向，例如： 

 header ( ' X-PJAX-URL: /new-page.html ' );

. . .

使用 PJAX 更改或新增容器

您可以在後端使用 HTTP 回應標頭X-PJAX-URL來強制 Pjax.js 重新導向，例如： 

 if ( isset ( $ _SERVER [ ' HTTP_X_PJAX ' ])) {
    header ( ' X-PJAX-Container: #foo,#bar ' );

    echo ' <div id="foo"> ... </div> ' ;

    echo ' <div id="bar"> ... </div> ' ;
}

使用 Pjax 的自訂載入程序

您可以自訂 CSS，例如更改顏色和大小、放入新的 CSS 檔案或<style>標記： 

. pjax-loader . pjax-progress {
    height : 6 px ;
    background-color : blue;
}

如果您需要自訂“更多”，請先刪除預設載入程式： 

 Pjax . start ( {
    loader : false
} ) ;

使用後initiate then事件： 

 Pjax . on ( "initiate" , function ( ) {
    $ ( ".my-custom-loader" ) . css ( "display" , "block" ) ;
} ) ;

Pjax . on ( "then" , function ( ) {
    $ ( ".my-custom-loader" ) . css ( "display" , "none" ) ;
} ) ;

HTML： 

 < div class =" my-custom-loader " >
    < img src =" loader.gif " >
</ div >

Pjax 處理程序回應

若要為 Pjax 建立自訂回應，您可以使用handler事件，例如： 

 Pjax . start ( ) ;

Pjax . on ( "handler" , function ( details , done , fail ) {
    console . log ( "handler request:" , details . method , details . url ) ;
    console . log ( "handler target:" , details . element ) ;
    console . log ( "handler mode history:" , details . state ) ; // 1 == push, 2 == replace

    setTimeout ( function ( ) {
        if ( < condition for history state > ) {
            done ( '<div id="pjax-container">Foo: ' + new Date ( ) + '</div>' ) ;
        } else {
            fail ( "Custom Error" ) ;
        }
    } , 1000 ) ;
} ) ;
展開
附加信息
相關應用
爲您推薦
相關資訊 全部