php 无刷新加载页面,PJAX无刷新页面，无刷新加载页面，无刷新切换浏览器url

为了提升页面体验，无刷新页面越来越多网站使用了，常规的网站，点击一个链接的时候，先是浏览器显示刷新，跳转页面，再呈现页面信息，过程耗时大约1-2秒。

下面看这个无刷新页面的演示。

代码

index.html

PJAX无刷新实例

*{

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;

}

PJAX无刷新实例

第一页

第二页

第二页

最近的娱乐圈是怎么了，基本每次早晨醒来看到热搜的时候就能看到一个让人震撼的消息，光最近九月份以来就已经去世了4位明星了，并且其中三位疑似都是自杀，现在成为明星的压力都已经这么大了吗？尤其是这几年韩国明星的自杀率也是越来越高了呢。

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();

});

page1.php<?php

echo '

《刁蛮公主》主演是张娜拉和苏有朋，两人都曾经是红得发紫的偶像，用如今的话来说就是顶流的存在。该剧讲述了前朝公主意外结识了当朝皇帝，并结拜为兄弟，由此展开了一系列啼笑皆非的故事。而如今该剧播出至今已14年了，不过剧中的女神，也是各有各的不同。

page2.php<?php

echo '

说起《神话》这部电视剧大家应该都不会觉得陌生，当时的电影和歌曲早已火爆全网，剧中最让人印象深刻的还是张萌饰演的两个角色：都市女高岚与绝代倾城的虞姬。非常的御姐范，而她也因这部剧走入观众视线，被观众所熟知 。

page3.php<?php

echo '

入秋后，此菜别错过，钙含量丰富，才2块钱一斤，简单一炒就很香。秋分之后，气温变凉的同时，人的食欲也变得越来越好了，很多小伙伴都开启了贴秋膘的饮食模式，平时各种大鱼大肉都没少吃，天凉了还喜欢约上小伙伴一起下馆子涮火锅吃，这样一来虽然满足了吃货的嘴，但也给肠胃增添了不少的负担。

因此这个时候我们就要多吃一些素菜，荤素搭配着一起吃，营养更均衡，饮食清淡一些，减轻肠胃的负担。时候秋天吃的蔬菜也有很多，莴笋就是其中之一，莴笋现在虽然一年四季都能吃得上，但秋天才是吃莴笋的最佳时令季节，这个季节的莴笋个大、水分足、口感清甜脆嫩，营养也是最佳的，是一道秋季不可错过的蔬菜之一。

除了以上代码，还需要下载一个进度条插件和jquery.pjax.js，这些我直接打包在下面这个链接，自己下载。

体验

另外一个版本，这个版本是使用Ajax+History实现的

Author:TANKING

Web:http://www.likeyun.cn/

Date:2020-09-30

WeChat:face6009