当前第2页 返回上一页
四、下面贴一个类似vue-router的HTML5模式的例子,纯属加深理解,写的很粗糙。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html><html lang= "en" ><head><meta charset= "UTF-8" ><title>HTML5 History 模式(第二版)</title><link rel= "stylesheet" type= "text/css" href= "css/style.css?1.1.10" ><style type= "text/css" >.container-bg{width:1000px; overflow: hidden; margin-right: 0 auto;}.pagination{width: 1000px; background-color: #d8d8d8; height: 30px; line-height: 30px;}.pagination li{width: 100px; height: 30px; background: red; float: left; cursor: pointer; color:#fff; margin: 0 10px 0 0;}</style></head><body><div class = "container-bg" ><ul class = "pagination" ><li>1</li><li>2</li><li>3</li></ul><ul class = "ptting" ></ul></div><script type= "text/javascript" src= "js/jquery-3.2.1.min.js?1.1.10" ></script><script type= "text/javascript" >
history.replaceState(null, "页面标题" , "http://127.0.0.1:3000/lmw/0" );//当页面载入时候,把url地址修改 var searchObject = {};
var factory = function (){ var addva = document.location.href;//获取完整URLvar query = searchObject[addva];//找到该URL对应的值 query = (query == undefined ? 0 :query);//发起ajax加载页面 $.get( "/page?page=" +query, function (data){ var data2 = JSON.parse(data); var ele = "" for ( var i=0;i<data2.data.length;i++){
ele += '<li>' +data2.data[i].name+ '</li>' }
$( '.ptting' ).html(ele)
})
};
$.get( "/page?page=" +query, function (data){ var data2 = JSON.parse(data); var ele = "" for ( var i=0;i<data2.data.length;i++){
ele += '<li>' +data2.data[i].name+ '</li>' }
$( '.ptting' ).html(ele)
history.pushState({pageIndex : 1}, "" , "http://127.0.0.1:3000/lmw/" +query);//把当前pushState的url,和ajax查询的值存入对象,以供触发pushState事件的时候使用 searchObject[ "http://127.0.0.1:3000/lmw/" +query] = query
})
})
window.addEventListener( "popstate" , function () {
factory()
});
factory()
};</script></body></html>
|
顺便贴一个node.js中的server代码,为了测试,很随意简单的写了一个
1 2 3 4 5 6 7 8 9 10 11 12 13 | var fs = require ( 'fs' ) var path = require ( 'path' ) var express = require ( 'express' ) var app = express();
app. use (express. static ( './public' )); var router = express.Router();
router.get( '/page' , function (req,res){ var page = req.query.pagetry{ var text = fs.readFileSync( './data' +page+ '.json' );
res.json(text.toString())
} catch (err){
res.send( '哈哈!傻逼,没有拉!' )
}
})
app. use (router)
app.listen(3000)
|
1 | 注意:history.pushState({pageIndex : 1}, "" , "http://127.0.0.1:3000/lmw/" +query)这里第三个参数写了完整的绝对路径,如果写成 "/lmw/" +query这样的相对路径,会随着query值得增加无限在url后面追加,因为相对路径它一定是相对于当前的URL
|
服务端放了data0.json,data1.json,data2.json来模拟一下数据库取数据,服务器更具前端传来的index值(0/1/2),来匹配读取data*.json文件,再发给前端
以上就是h5History 模式的实例教程的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
html5视频播放教程实例
html5之javascript多线程的详解
详细介绍通过html5的drag和drop生成拓扑图片base64信息的案例
html5的contenteditable属性解析
html5实现把上传的图片转成base64编码在显示(代码实例)
html5的data-*自定义属性是什么
html5 video怎么停止播放视频
html5 canvas如何实现代码流瀑布?(附代码)
浅析html5中使用data-*来自定义属性
h5的地理定位怎样使用
更多相关阅读请进入《History》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » h5History 模式的实例教程