PJAX無刷新頁面，無刷新加載頁面，無刷新切換瀏覽器url

時間 2020-10-01

原文原文鏈接

爲了提高頁面體驗，無刷新頁面愈來愈多網站使用了，常規的網站，點擊一個連接的時候，先是瀏覽器顯示刷新，跳轉頁面，再呈現頁面信息，過程耗時大約1-2秒。javascript

下面看這個無刷新頁面的演示。php

代碼

index.htmlcss

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.0.0/jquery.min.js"></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.phphtml

<?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.phpjava

<?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.phpjquery

<?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，這些我直接打包在下面這個連接，本身下載。ajax

https://www.lanzoux.com/iWjXK...瀏覽器