pjax怎样用

WBOY
Release: 2016-06-06 20:15:21
Original
1456 people have browsed it

求用过的人来回答 教会必定报酬

回复内容:

求用过的人来回答 教会必定报酬

<code>window.history.pushState(state, title, url);
// https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
// @状态对象:  记录历史记录点的额外对象,可以为空.
// @页面标题:  目前所有浏览器都不支持.
// @可选的URL: 浏览器不会检查URL是否存在,只改变URL.URL必须同域,不能跨域.</code>
Copy after login

PJAX其实就是HTML5 window.history.pushState(state, title, url)这个新的API加上传统的AJAX技术,一般用来实现无刷新的页面加载.pushState的作用主要是:改变URL和添加返回历史.这样AJAX无刷新加载页面后,用户还可以正常进行后退和前进,JS的window.history.back()window.history.forward()也能正常工作.下面就是一个用pushState + jQuery AJAX实现的无刷新的页面加载,不支持的浏览器则自动退化成打开原始的链接打开形式.

<code>index.php:



<meta charset="utf-8">
<title>Index</title>
<script src="jquery.js"></script>


<div id="main">
    <a href="data.php">data.php</a>
    <script>
    $(document).ready(function() {
        $('#main').on('click','a',function(e) {
            if(window.history.pushState) {
                e.preventDefault(); //不跟随原链接跳转
                url = $(this).attr('href');
                $.ajax({
                    async: true,
                    type: 'GET',
                    url: 'data.php',
                    data: 'pjax=1',
                    success: function(data) {
                        window.history.pushState(null, null, url); //改变URL和添加返回历史
                        document.title = data.title; //设置标题
                        $('#main').html(data.main); //设置内容
                    }
                });
            } else {
                return; //低版本IE8等不支持HTML5 pushState,直接返回进行链接跳转
            }
        });
    });
    </script>
</div>



data.php:
<?php if(isset($_GET['pjax'])) {
    //PJAX请求返回JSON
    $arr['title'] = 'Data';
    $arr['main'] = '<h1>Data Content';
    //下面这两句是把PHP数组转成JSON对象返回
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($arr);
} else {
    //常规请求返回HTML
?>



<meta charset="utf-8">
<title>Data</title>
<script src="jquery.js"></script>


<div id="main"><h1>Data Content</h1></div>


<?php } ?></code>
Copy after login

注意,JS统计代码应该放到main块里面才能正常统计页面访问数.

Related labels:
php
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template