Using Jquery.pjax to implement SPA single page application

In front of me an article introduced the front-end Routing and Pjax single page application of example applications, today I come to share a single page application artifact Jquery.pjax.js. It is based on jquery Pjax Plug-ins, easy to use, full-featured. I will give you a combination of examples to explain the use of jquery.pjax.js.

In the previous article, we learned the principle of pjax, it is to use the HTML5 pushstate+ajax Enhanced page Local refresh function, it is in our original Ajax function, realize can record browsing history, can use browser forward back function, The URL of the browser can follow the content changes, and the entire page can only refresh a part, that is, local refresh.
The example that I'm going to share today is the analog paging feature, which is one of the most common components in web development. Normally, click the page in the paging component, page will jump to the corresponding page, and the use of Pjax, click on the page number, will send an AJAX request to the backend, the response to update the corresponding page content, while the Address bar URL also corresponds to the actual page number URL, but the entire page does not jump, Gives us the feeling is very fluent, of course, we can also increase the load animation effect when the request page is asynchronous. To see the specific use of the method.

We prepare a loading div#loading, which is hidden by default, when Ajax requests are displayed. #container是用来加载响应的页面内容. Pagination is a page-bar component.
<div class= "Row" >
<div id= "Loading" >Loading...</div>
<div id= "container" >jquery.pjax paging </div>
<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>
</div>

Javascript

The Pjax component we use relies on the jquery library, so load the two files first.

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

Then, use the following code to invoke the Pjax plug-in.

$ (document). Pjax (' Pagination a ', ' #container ');
$ (document). On (' Pjax:send ', function () {
$ (' #loading '). Show ();
})
$ (document). On (' Pjax:complete ', function () {
$ (' #loading '). Hide ();
})

In the code above, we tell Pjax to listen for a label and use #container as the target container:
$ (document). Pjax (' Pagination a ', ' #container ');
Now in the Pjax-compatible browser, click the page number on the page, the content container #container content will be replaced by Data.php?p=x content.
Data.php's content we write a simple code, the actual development should be read the database list of data.
$p = intval ($_get[' P ']);
if ($p ==0) $p = 1;
Echo ' This is the first '. $p. ' Page ';
Options and Events
Pjax Invocation Method We have just briefly introduced that it can also set some options for customization. The format is as follows:
$ (document). Pjax (selector, [container], options)
Selector is a string, such as the text event delegation to be clicked.
Container is a string that selects a unique identification Pjax container.
The options described below are an object.

Parameters	Describe	Default value
Timeout	Full force flush after Ajax timeout milliseconds	650
Push	Using Pushstate to add browser history to the Navigator	True
Replace	Change URLs do not add browser history	False
Maxcachelength	Large cache size for previous container contents	20
Version	A string or function that returns the current Pjax version
Scrollto	Vertical position to scroll the navigation. To avoid changing the scrolling position, set to false.	0
Type	How Web pages are requested	"Get"
DataType	The data type returned	"HTML"
Container	Elements of the CSS selector, the contents of which should be replaced in time
Url	URL Ajax request returned by string or function	Link.href
Target	The final relatedtarget value, through Pjax events	Link
Fragment	CSS selector fragments extracted from Ajax response

Event methods

Event	Describe
Pjax:click	Block a linked default event to prevent Pjax events from being blocked
Pjax:beforesend	See XHR headers
Pjax:start	Request Start
Pjax:send	Send Request
Pjax:clicked	Pjax after that has gotten started by clicking a link
Pjax:beforereplace	Content that HTML loads from the server before content is replaced
Pjax:success	When content is replaced, HTML content is loaded from the server
Pjax:timeout	After the option is options.timeout, it will be difficult to refresh unless canceled
Pjax:error	An AJAX error that will perform the original page refresh until the page load is canceled
Pjax:complete	Always called after Pjax execution is complete, regardless of the result of the run
Pjax:end	End of request
Pjax:popstate	Browser forward Backward Event direction property: "Back"/"forward"

$.pjax can also respond to click events, and submit forms and reload events. Please refer to Jquery.pjax project for details