首页>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 ) ;
} ) ;
展开
附加信息
相关应用
为您推荐
相关资讯 全部