Pjax 小试一把！参数以及事件说明

最新推荐文章于 2024-08-22 08:39:42 发布

田小涛

最新推荐文章于 2024-08-22 08:39:42 发布

阅读量2.8k

点赞数

分类专栏： HTML 文章标签： HTML Pjax

本文链接：https://blog.csdn.net/Q718330882/article/details/73643056

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

pushState是一个可以操作history的api

pjax是对ajax + pushState的封装，让你可以很方便的使用pushState技术。

同时支持了缓存和本地存储，下次访问的时候直接读取本地数据，无需在次访问。

并且展现方式支持动画技术，可以使用系统自带的动画方式，也可以自定义动画展现方式。

pjax options

key	default	description
`timeout`	650	ajax timeout in milliseconds after which a full refresh is forced
`push`	true	use pushState to add a browser history entry upon navigation
`replace`	false	replace URL without adding browser history entry
`maxCacheLength`	20	maximum cache size for previous container contents
`version`		a string or function returning the current pjax version
`scrollTo`	0	vertical position to scroll to after navigation. To avoid changing scroll position, pass`false`.
`type`	`"GET"`	see $.ajax
`dataType`	`"html"`	see $.ajax
`container`		CSS selector for the element where content should be replaced
`url`	link.href	a string or function that returns the URL for the ajax request
`target`	link	eventually the `relatedTarget` value for pjax events
`fragment`		CSS selector for the fragment to extract from ajax response

`$.pjax.click`

if ($.support.pjax) {
  $(document).on('click', 'a[data-pjax]', function(event) {
    var container = $(this).closest('[data-pjax-container]')
    var containerSelector = '#' + container.id
    $.pjax.click(event, {container: containerSelector})
  })
}

`$.pjax.submit`

$(document).on('submit', 'form[data-pjax]', function(event) {
  $.pjax.submit(event, '#pjax-container')
})

`$.pjax.reload`

$.pjax.reload('#pjax-container', options)

`$.pjax`

function applyFilters() {
  var url = urlForFilters()
  $.pjax({url: url, container: '#pjax-container'})
}

Events

event	cancel	arguments	notes
event lifecycle upon following a pjaxed link
`pjax:click`	✔︎	`options`	fires from a link that got activated; cancel to prevent pjax
`pjax:beforeSend`	✔︎	`xhr, options`	can set XHR headers
`pjax:start`		`xhr, options`
`pjax:send`		`xhr, options`
`pjax:clicked`		`options`	fires after pjax has started from a link that got clicked
`pjax:beforeReplace`		`contents, options`	before replacing HTML with content loaded from the server
`pjax:success`		`data, status, xhr, options`	after replacing HTML content loaded from the server
`pjax:timeout`	✔︎	`xhr, options`	fires after `options.timeout`; will hard refresh unless canceled
`pjax:error`	✔︎	`xhr, textStatus, error, options`	on ajax error; will hard refresh unless canceled
`pjax:complete`		`xhr, textStatus, options`	always fires after ajax, regardless of result
`pjax:end`		`xhr, options`
event lifecycle on browser Back/Forward navigation
`pjax:popstate`			event `direction` property: "back"/"forward"
`pjax:start`		`null, options`	before replacing content
`pjax:beforeReplace`		`contents, options`	right before replacing HTML with content from cache
`pjax:end`		`null, options`	after replacing content

详细文档： https://github.com/defunkt/jquery-pjax

Jquery 版本使用案例：（不能绑定外域的url）

<!DOCTYPE html>
<html>
<head>
  <title>pjax</title>
    <meta charset="utf-8">
</head>
<body>
  <h1>My Site</h1>
  <ul>
	<li><a href="aliens.data.php">第一页</a></li>
	<li><a href="home.data.php">第二页</a></li>
	<li><a href="dinosaur.data.php">第三页</a></li>
  </ul>
  <input type="button" id="clickMe" value="GO">
  <div id="container">
	<li>1</li>
	<li>1</li>
	<li>1</li>
  </div>    
</body>
<script src="jquery-2.2.0.min.js"></script>
<script src="jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a', '#container');
$( ':button' ).click( function(){
	$(document).on('pjax:send', function() {
	  console.log( 'pjax start' );
	})
	$(document).on('pjax:complete', function() {
	  console.log( 'pjax end' );
	})
	$.pjax({
	     url: 'ajax.data.php',
	     container: '#container'
	})
});
</script>
</html>

Hoem..data.php

<?php 

echo '这是首页啊！';

Aliens.data.php

<?php 

echo '这是啊0！ 不知道';

Dinosaur.data.php

<?php 

echo '这是啊1！ 知道了';

Ajax.data.php

<?php

echo '这是Pjax 异步获取数据呢！';

田小涛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Pjax 小试一把！ 参数以及事件说明

pjax options

$.pjax.click

$.pjax.submit

$.pjax.reload

$.pjax