1. 新建index.html页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1页面</title>
    <script type="text/javascript" src="/Public/Member/js/jquery-1.9.1.js"></script>
    <script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.js"></script>
    /*进度条动画*/
    <link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.js"></script>
</head>
<body>
<div class="k_rig">
    我是内容1
</div>
<a class="pjax" href="index2.html">点击跳转</a>
</body>
<script>
    /*pjax 实现*/
    if($.support.pjax){
            //pjax 初始化 绑定按钮 当前页面要替换的标签内容
            $(document).pjax(".pjax",'.k_rig',{
                fragment: '.k_rig',                          //来源页面的标签内容
            })
            $(document).on('pjax:start', function () { //pjax链接点击后显示加载动画
                console.log("开始加载");
                NProgress.start();
            });
            $(document).on('pjax:send', function () {
                console.log("发送请求");
            });

            $(document).on('pjax:success', function (data, status, xhr, options) {
                console.log("加载成功");

            });
            $(document).on('pjax:complete', function () {
                console.log("加载完成");
            });
            $(document).on('pjax:end', function () {
                console.log("加载结束");
                NProgress.done();
            });
            $(document).on('pjax:error', function () {
                console.log("加载失败!");
            });
        }
</script>
</html>

2. 新建index2.html页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2页面</title>
</head>
<body>
<div class="k_rig">
    我是内容2
</div>
</body>
</html>

在实际使用中 如果 pjax失效 页面跳转的话 看一下PHP页面是否使用了 ajax判断 如果是的话 在ajax判断中添加 $_SERVER['HTTP_X_PJAX']!=="true" 这个是pjax的参数 这样pjax 就不会进入到ajax的判断中

click 方法使用

$.pjax({"url": url,"container":'.k_box',"fragment":'.k_box'})
Last modification:December 5th, 2019 at 11:02 am
如果觉得我的文章对你有用,请随意赞赏