Pjax 用法

首發 11. 25, 2023 修改 12. 13, 2023 9156

Pjax

Pjax github倉庫

pjax 教學視頻: 【jQuery插件pjax pjax介绍 引入pjax和调用方法 配置项 高级设置 js前端pushState无刷新加载 2023年最新录制】

以下筆記來自於以上Pjax 教學視頻

是否支持pjax?

因為有些比較老的瀏覽器不支持HTML5

1
2
3
4
5
if($.support.pjax){
  console.log('支持pjax');
}else{
  console.warn('沒有支持pjax');
}

調用方法

方法一: 指定容器

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

點擊了selector，向後端取得HTML代碼，放到container裡

舉例：有兩個連結，點擊測試1，pjax 會將test-container改為/p1.html裡的html碼，但是不會進入超連結p1.html頁面，網址會改為p1.html，options加入push: false，就不會改網址 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a data-pjax href="/p1.html"> 測試1 </a>
<a data-pjax href="/p2.php"> 測試2 </a>
<div id="test-container"> test-container </div>

<script>
  if($.support.pjax){
    console.log('支持pjax');
    $(document).pjax('a[pjax-data]','#test-container',{
      push: false;
    });
  }else{
    console.warn('沒有支持pjax');
  }
</script>

方法二： 不指定容器

1
$("a[data-pjax]").pjax();

範例： 一開始就指定容器data-pjax="#test-container"

1
2
3
4
5
6
7
8
9
10
11
12
<a data-pjax="#test-container" href="/p1.html"> 測試1 </a>
<a data-pjax="#test-container" href="/p2.php"> 測試2 </a>
<div id="test-container"> test-container </div>

<script>
  if($.support.pjax){
    console.log('支持pjax');
    ("a[data-pjax]").pjax();
  }else{
    console.warn('沒有支持pjax');
  }
</script>

方法三：主動綁定點擊事件

方法三(A)

用on監聽click事件，監聽a元素被點擊，別點擊後執行pjax的click事件 以下(document)要寫成$(document) 

1
(document).on('click','a',$.pjax.click)

範例

1
2
3
4
5
6
7
8
9
10
11
12
<a data-pjax="#test-container" href="/p1.html"> 測試1 </a>
<a data-pjax="#test-container" href="/p2.php"> 測試2 </a>
<div id="test-container"> test-container </div>

<script>
  if($.support.pjax){
    console.log('支持pjax');
    (document).on('click','a',$.pjax.click)；
  }else{
    console.warn('沒有支持pjax');
  }
</script>

方法三(B)

1
$.pjax.click(event, {container: containerSelector});

範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<a data-pjax="#test-container" href="/p1.html"> 測試1 </a>
<a data-pjax="#test-container" href="/p2.php"> 測試2 </a>
<div id="test-container"> test-container </div>

<script>
  if($.support.pjax){
    console.log('支持pjax');
    $(document).on('click','a[data-pjax]', function(event){
    	var containerSelector = $('[data-pjax-container]').attr('id');
    	// attr： 返回selector: data-pjax-container的id屬性值
    	$.pjax.click(event, '#'+containerSelector);
    })；
  }else{
    console.warn('沒有支持pjax');
  }
</script>

方法四：主動綁定表單

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form action="./p2.php" data-pjax>
	<input type="text" name="username">
	<button type="submit">提交</button>
</form>

<div id="test-container"> test-container </div>

<script>
  if($.support.pjax){
    console.log('支持pjax');
    $(document).on('submit', 'a[data-pjax]', function(event){
    	var containerSelector = $('[data-pjax-container]').attr('id');
    	// attr： 返回selector: data-pjax-container的id屬性值
    	//點擊表單submit 會啟動pjax
    	$.pjax.click(event, '#'+containerSelector);
    })；
  }else{
    console.warn('沒有支持pjax');
  }
</script>

方法五:Pjax加載內容指定容器

使用場景：如果是進到頁面就要執行pjax，不像上面的範例，需要執行點擊事件

1
$.pjax({url: href, container: '#container'});

範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<a data-pjax id="ceshi" href="/p1.html"> 測試1 </a>
<div id="test-container"> test-container </div>

<script>
  if($.support.pjax){
    console.log('支持pjax');
    var containerSelector = $('[data-pjax-container]').attr('id');
    	// attr： 返回selector: data-pjax-container的id屬性值
	$.pjax({
		url: $('#ceshi').attr('href'),
		container: '#'+containerSelector
	});
  }else{
    console.warn('沒有支持pjax');
  }
</script>

方法六： 重新加載當前頁面容器的內容

1
$.pjax.reload('#container');

範例：每一秒鐘刷新container

1
2
3
setInterval(()=>{
	$.pjax.reload('#container');
}, 1000)

options 選項

key 默認值 描述
timeout 650 AJAX超時(單位毫秒)，之後將完全刷新
push true 使用pushState在導航時添加瀏覽器歷史紀錄條目
replace false 替換URL而不添加瀏覽器歷史紀錄條目
maxCacheLength 20 容器內容的最大緩存大小
version 返回當前PJAX版本
scrollTo 0 導航後滾動到的垂直位置(int)。為避免更改滾動位置，false
type "GET" see [\(.ajax][] `dataType` | `"html"` | see [\).ajax][]
container 容器css選擇器
url link.href 請求的網址
target link eventually the relatedTarget value for pjax events
fragment 要從ajax響應中提取片段的CSS選擇器

全局更改默認值

$.pjax.default

1
$.pjax.default.timeout = 1200;

事件

範例，github文檔裡還有很多事件 

1
2
3
4
5
6
7
8
9
10
11
$(document).on('pjax:beforeSend', function(){
	console.log('發送前')；
});

$(document).on('pjax:Send', function(){
	console.log('pjax發送')；
});

$(document).on('pjax:complete', function(){
	console.log('pjax完成')；
});

Zhaoo 主題的Pjax

在 /theme/zhaoo/source/js/script.js的var action裡面

1
2
3
4
5
6
7
8
9
10
11
12
pjax: function () {
    $(function () {
      //pjax selector 是a 但不包括id = menu
      $(document).pjax("a:not(.menu *)", '#main', {
        fragment: '#main',
        timeout: 6000
      });
    });
    $(document).on('pjax:complete', function () {
      CONFIG.fancybox && action.fancybox();
  });
},

CONFIG 的定義在 /theme/zhaoo/layout/_partial/head.ejs裡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: <%= is_home() %>,
      fancybox: <%= theme.fancybox %>,
      pjax: <%= theme.pjax || false %>,
      loading: {
        gif: '<%= theme.loading.gif %>',
        lottie: '<%= theme.loading.lottie %>'
      },
      lazyload: {
        enable: <%= theme.lazyload.enable %>,
        only_post: '<%= theme.lazyload.only_post %>',
        loading: {
          gif: '<%= theme.lazyload.loading.gif %>',
          lottie: '<%= theme.lazyload.loading.lottie %>'
        }
      },
      donate: {
        enable: <%= theme.donate.enable %>,
        alipay: '<%= theme.donate.alipay %>',
        wechat: '<%= theme.donate.wechat %>'
      },
      galleries: {
        enable: <%= theme.galleries.enable %>
      },
      fab: {
        enable: <%= theme.fab.enable %>,
        always_show: <%= theme.fab.always_show %>
      },
      carrier: {
        enable: <%= theme.carrier.enable %>
      },
      daovoice: {
        enable: <%= theme.daovoice.enable %>
      },
      preview: {
        background: {
          default: '<%= theme.preview.background.default %>',
          api: '<%= theme.preview.background.api %>'
        },
        motto: {
          default: '<%= theme.preview.motto.default %>',
          typing: <%= theme.preview.motto.typing %>,
          api: '<%- theme.preview.motto.api %>',
          data_contents: '<%- theme.preview.motto.data_contents && JSON.stringify(theme.preview.motto.data_contents) %>'
        },
      },
      qrcode: {
        enable: <%= theme.qrcode.enable %>,
        type: '<%= theme.qrcode.type %>',
        image: '<%= theme.qrcode.image %>',
      },
      toc: {
        enable: <%= theme.toc.enable %>
      },
      scrollbar: {
        type: '<%= theme.scrollbar.type %>'
      },
      notification: {
        enable: <%= theme.notification.enable %>,
        delay: <%= theme.notification.delay || 4500 %>,
        list: '<%- site.data.notification && JSON.stringify(site.data.notification) %>',
        page_white_list: '<%- theme.notification.page_white_list && JSON.stringify(theme.notification.page_white_list) %>',
        page_black_list: '<%- theme.notification.page_black_list && JSON.stringify(theme.notification.page_black_list) %>'
      },
      search: {
        enable: <%= theme.search.enable %>,
        path: <%- config.search && config.search.path ? `'${config.search.path}'` : `''` %>
      }
    }
  </script>