首页 > 建站教程 > JS、jQ、TS >  jQuery pjax实现无刷新页面，无刷新加载页面，无刷新切换浏览器url正文

jQuery pjax实现无刷新页面，无刷新加载页面，无刷新切换浏览器url

常规的网站，点击一个链接的时候，先是浏览器显示刷新，跳转页面，再呈现页面信息，过程耗时大约1-2秒。为了提升用户体验，无刷新切换页面很有必要。jQuery pjax就可以实现无刷新页面、无刷新加载页面、无刷新切换浏览器url，有点类似于vue、react的单页面应用。

效果图：



在线预览：PJAX无刷新实例


index.html 
<!DOCTYPE html>
<html>
<head>
    <title>PJAX无刷新实例</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="nprogress.css">
    <style type="text/css">
        *{
            margin:0;
        }
        #title{
            width: 500px;
            margin:50px auto 0;
        }
        #top{
            width: 500px;
            height: 50px;
            background: #333;
            margin:10px auto;
        }
        #top a{
            width: 60px;
            color: #fff;
            font-size: 16px;
            text-decoration: none;
            display: block;
            float: left;
            margin-left: 20px;
            text-align: center;
            line-height: 50px;
        }
        #container{
            width: 500px;
            margin:0 auto;
        }

        #container img{
            max-width: 500px;
        }
    </style>
</head>

<body>

<!-- 标题 -->
<div id="title">
    <h1>PJAX无刷新实例</h1>
</div>

<!-- 超链接导航 -->
<div id="top">
    <a href="page1.php">第一页</a>
    <a href="page2.php">第二页</a>
    <a href="page3.php">第二页</a>
</div>

<!-- 渲染容器 -->
<div id="container"><p>最近的娱乐圈是怎么了，基本每次早晨醒来看到热搜的时候就能看到一个让人震撼的消息，光最近九月份以来就已经去世了4位明星了，并且其中三位疑似都是自杀，现在成为明星的压力都已经这么大了吗？尤其是这几年韩国明星的自杀率也是越来越高了呢。</p><p><br/></p><p><img src="https://05imgmini.eastday.com/mobile/20200928/20200928065239_cf407c2183c7d67672696edb7432abb8_1.jpeg" data-ratio="0.5351437699680511" data-w="626" style="width:auto;"/></p><p><br/></p>
</div>

</body>

<!-- 引入JS -->
<script src="http://www.5imoban.net/uploads/allimg/210709/1511413456-2.jpg"></script>
<script src="jquery.pjax.js" type="text/javascript"></script>
<script src="nprogress.js" type="text/javascript"></script>

<!-- 实例化 -->
<script type="text/javascript">
    NProgress.start();
    window.onload = function () {
        NProgress.done();
    }

    // 请求开始后触发NProgress.start()
    $(document).on('pjax:click', function () {
        NProgress.start();
    });

    // 触发pjax，更新内容
    $(document).pjax('a', '#container');

    // 请求结束后触发，不管成功还是失败NProgress.done()
    $(document).on('pjax:complete', function () {
        NProgress.done();
    });
    
</script>

</html>
page1.php 
<?php
echo '<section data-role="paragraph" class="">
    <p>
        《刁蛮公主》主演是张娜拉和苏有朋，两人都曾经是红得发紫的偶像，用如今的话来说就是顶流的存在。该剧讲述了前朝公主意外结识了当朝皇帝，并结拜为兄弟，由此展开了一系列啼笑皆非的故事。而如今该剧播出至今已14年了，不过剧中的女神，也是各有各的不同。
    </p>
    <p>
        <br/>
    </p>
    <p>
        <img src="https://07imgmini.eastday.com/mobile/20200926/20200926082714_00bc5be7c96444f86128bd020b89919d_1.jpeg" data-ratio="0.5616666666666666" data-w="600" style="width:auto;"/>
    </p>
</section>
<p>
    <br/>
</p>';
page2.php 
<?php
echo '<p>
    说起《神话》这部电视剧大家应该都不会觉得陌生，当时的电影和歌曲早已火爆全网，剧中最让人印象深刻的还是张萌饰演的两个角色：都市女高岚与绝代倾城的虞姬。非常的御姐范，而她也因这部剧走入观众视线，被观众所熟知 。
</p>
<p>
    <br/>
</p>
<p>
    <img src="https://05imgmini.eastday.com/mobile/20200927/20200927160152_394612de2b31368eed8e5613ff303ad3_1.jpeg" data-ratio="0.712" data-w="750" style="width:auto;"/>
</p>
<p>
    <br/>
</p>';
page3.php 
<?php
echo '<p>
    入秋后，此菜别错过，钙含量丰富，才2块钱一斤，简单一炒就很香。秋分之后，气温变凉的同时，人的食欲也变得越来越好了，很多小伙伴都开启了贴秋膘的饮食模式，平时各种大鱼大肉都没少吃，天凉了还喜欢约上小伙伴一起下馆子涮火锅吃，这样一来虽然满足了吃货的嘴，但也给肠胃增添了不少的负担。
</p>
<p>
    <br/>
</p>
<p>
    <img src="https://01imgmini.eastday.com/mobile/20200928/20200928230718_54e511a724c9e697372fafee4f5b1c33_3.png" data-ratio="0.6960893854748603" data-w="895" style="width:auto;"/>
</p>
<p>
    <br/>
</p>
<p>
    因此这个时候我们就要多吃一些素菜，荤素搭配着一起吃，营养更均衡，饮食清淡一些，减轻肠胃的负担。时候秋天吃的蔬菜也有很多，莴笋就是其中之一，莴笋现在虽然一年四季都能吃得上，但秋天才是吃莴笋的最佳时令季节，这个季节的莴笋个大、水分足、口感清甜脆嫩，营养也是最佳的，是一道秋季不可错过的蔬菜之一。
</p>
<p>
    <br/>
</p>';
除了以上代码，还需要下载一个进度条插件和jquery.pjax.js，点击下载PJAX无刷新代码

TAGS: pjax  无刷新加载  无刷新切换