最近有个项目: ???存静态web服务,一个新闻页面列表出所有新闻摘要信息,然后通过点击新闻详情访问到该新闻的详情页面; ???新闻展示的页面通过ajax请求接口获取到新闻的摘要信息,预计想通过id的方式访问到新闻详情页面; ???如果动态实现跳转非常简单,静态文件跳转。。。想了一下是否能实现在静态文件的后面加上请求的id呢?比如动态情况http://news.com/?new_id=1; ???静态请求src="news_content.html?new_id=1" ???最后查资料还是能实现的;
特别声明:Post.html和Read.html文件在同一级目录下
1. 请求页面(新闻列表页面)
Post.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body>代码如下:<a href="Read.html?art_id=1">静态传值</a></body></html>
2. 跳转静态的页面(新闻详情页面)
Read.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><script> ???UrlParm = function () { // url参数 ???????var data, index; ???????(function init() { ???????????data = []; ???????????index = {}; ???????????var u = window.location.search.substr(1); ???????????if (u != ‘‘) { ???????????????var parms = decodeURIComponent(u).split(‘&‘); ???????????????for (var i = 0, len = parms.length; i < len; i++) { ???????????????????if (parms[i] != ‘‘) { ???????????????????????var p = parms[i].split("="); ???????????????????????if (p.length == 1 || (p.length == 2 && p[1] == ‘‘)) {// p | p= ???????????????????????????data.push([‘‘]); ???????????????????????????index[p[0]] = data.length - 1; ???????????????????????} else if (typeof(p[0]) == ‘undefined‘ || p[0] == ‘‘) { // =c | = ???????????????????????????data[0] = [p[1]]; ???????????????????????} else if (typeof(index[p[0]]) == ‘undefined‘) { // c=aaa ???????????????????????????data.push([p[1]]); ???????????????????????????index[p[0]] = data.length - 1; ???????????????????????} else {// c=aaa ???????????????????????????data[index[p[0]]].push(p[1]); ???????????????????????} ???????????????????} ???????????????} ???????????} ???????})(); ???????return { ???????????// 获得参数,类似request.getParameter() ???????????parm: function (o) { // o: 参数名或者参数次序 ???????????????try { ???????????????????return (typeof(o) == ‘number‘ ? data[o][0] : data[index[o]][0]); ???????????????} catch (e) { ???????????????} ???????????}, ???????????//获得参数组, 类似request.getParameterValues() ???????????parmValues: function (o) { // o: 参数名或者参数次序 ???????????????try { ???????????????????return (typeof(o) == ‘number‘ ? data[o] : data[index[o]]); ???????????????} catch (e) { ???????????????} ???????????}, ???????????//是否含有parmName参数 ???????????hasParm: function (parmName) { ???????????????return typeof(parmName) == ‘string‘ ? typeof(index[parmName]) != ‘undefined‘ : false; ???????????}, ???????????// 获得参数Map ,类似request.getParameterMap() ???????????parmMap: function () { ???????????????var map = {}; ???????????????try { ???????????????????for (var p in index) { ???????????????????????map[p] = data[index[p]]; ???????????????????} ???????????????} catch (e) { ???????????????} ???????????????return map; ???????????} ???????} ???}(); ???var art_id = UrlParm.parm("art_id"); ???console.log(art_id, ‘#####‘)</script></body></html>
3. 要设置cookice
问题: ???这样虽然是能实现需求,不过当用户从新闻页面传参id到新闻详情页面,再次刷新,页面上一次获得id就不存在了;所有就想到是否可以将id写入到cookice中,最好是页面关闭的时候将cookice清空掉
特别提醒:要加载jquery.cookie.js文件下载地址
在刚才的Read.html页面scripts标签中进行添加代码
<script type="text/javascript" src="/web/js/jquery.cookie.js"></script> <script type="text/javascript">... ??var art_id = UrlParm.parm("art_id"); ???console.log(art_id, ‘#####‘); ???/**设置cookice ??存储3天期限***/ ???$.cookie(‘art_id‘,art_id,{expires: 3,path:‘/‘}); ???/** 获取cookice中的id */ ???$.cookie(‘art_id‘); ???/**最后就是正常的ajax请求接口获取数据,然后巴拉巴拉~~~**/</script>
页面关闭清空cookie还没搞,就先这样作为一个笔记!!!!
附加:页面关闭清空cookie没有测试不清楚是否有效
???window.onbeforeunload = function (event) { ???????$.cookie(‘art_id‘, {expires: -1,path:‘/‘}); ???????var message = ‘...‘; ???????if (typeof event == ‘undefined‘) { ???????????event = window.event; ???????} ???????if (event) { ???????????event.returnValue = message; ???????} ???????return message; ???}
js实现静态页面跳转传参
原文地址:https://www.cnblogs.com/supery007/p/9241294.html