1. 最近有个项目：
  2.     存静态web服务，一个新闻页面列表出所有新闻摘要信息，然后通过点击新闻详情访问到该新闻的详情页面；
  3.     新闻展示的页面通过ajax请求接口获取到新闻的摘要信息，预计想通过id的方式访问到新闻详情页面；
  4.     如果动态实现跳转非常简单，静态文件跳转。。。想了一下是否能实现在静态文件的后面加上请求的id呢？比如动态情况http://news.com/?new_id=1；
  5.     静态请求src="news_content.html?new_id=1"
  6.     最后查资料还是能实现的；

特别声明：Post.html和Read.html文件在同一级目录下

1. 请求页面(新闻列表页面)

Post.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. 代码如下:
  9.  
  10. <a href="Read.html?art_id=1">静态传值</a>
  11.  
  12. </body>
  13. </html>

2. 跳转静态的页面(新闻详情页面)

Read.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <script>
  10.     UrlParm = function () { // url参数
  11.         var data, index;
  12.         (function init() {
  13.             data = [];
  14.             index = {};
  15.             var u = window.location.search.substr(1);
  16.             if (u != '') {
  17.                 var parms = decodeURIComponent(u).split('&');
  18.                 for (var i = 0, len = parms.length; i < len; i++) {
  19.                     if (parms[i] != '') {
  20.                         var p = parms[i].split("=");
  21.                         if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p=
  22.                             data.push(['']);
  23.                             index[p[0]] = data.length - 1;
  24.                         } else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c | =
  25.                             data[0] = [p[1]];
  26.                         } else if (typeof(index[p[0]]) == 'undefined') { // c=aaa
  27.                             data.push([p[1]]);
  28.                             index[p[0]] = data.length - 1;
  29.                         } else {// c=aaa
  30.                             data[index[p[0]]].push(p[1]);
  31.                         }
  32.                     }
  33.                 }
  34.             }
  35.         })();
  36.         return {
  37.             // 获得参数,类似request.getParameter()
  38.             parm: function (o) { // o: 参数名或者参数次序
  39.                 try {
  40.                     return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);
  41.                 } catch (e) {
  42.                 }
  43.             },
  44.             //获得参数组, 类似request.getParameterValues()
  45.             parmValues: function (o) { // o: 参数名或者参数次序
  46.                 try {
  47.                     return (typeof(o) == 'number' ? data[o] : data[index[o]]);
  48.                 } catch (e) {
  49.                 }
  50.             },
  51.             //是否含有parmName参数
  52.             hasParm: function (parmName) {
  53.                 return typeof(parmName) == 'string' ? typeof(index[parmName]) != 'undefined' : false;
  54.             },
  55.             // 获得参数Map ,类似request.getParameterMap()
  56.             parmMap: function () {
  57.                 var map = {};
  58.                 try {
  59.                     for (var p in index) {
  60.                         map[p] = data[index[p]];
  61.                     }
  62.                 } catch (e) {
  63.                 }
  64.                 return map;
  65.             }
  66.         }
  67.     }();
  68.  
  69.     var art_id = UrlParm.parm("art_id");
  70.     console.log(art_id, '#####')
  71. </script>
  72.  
  73. </body>
  74. </html>

3. 要设置cookice

  1. 问题：
  2.     这样虽然是能实现需求，不过当用户从新闻页面传参id到新闻详情页面，再次刷新，页面上一次获得id就不存在了；所有就想到是否可以将id写入到cookice中，最好是页面关闭的时候将cookice清空掉

特别提醒：要加载jquery.cookie.js文件下载地址

在刚才的Read.html页面scripts标签中进行添加代码

  1. <script type="text/javascript" src="/web/js/jquery.cookie.js"></script>
  2. <script type="text/javascript">
  3. ...
  4.    var art_id = UrlParm.parm("art_id");
  5.     console.log(art_id, '#####');
  6.     /**设置cookice   存储3天期限***/
  7.     $.cookie('art_id',art_id,{expires: 3,path:'/'});
  8.     /** 获取cookice中的id */
  9.     $.cookie('art_id');
  10.     /**最后就是正常的ajax请求接口获取数据,然后巴拉巴拉~~~**/
  11. </script>

页面关闭清空cookie还没搞，就先这样作为一个笔记！！！！

附加：页面关闭清空cookie没有测试不清楚是否有效

  1.     window.onbeforeunload = function (event) {
  2.         $.cookie('art_id', {expires: -1,path:'/'});
  3.         var message = '...';
  4.         if (typeof event == 'undefined') {
  5.             event = window.event;
  6.         }
  7.         if (event) {
  8.             event.returnValue = message;
  9.         }
  10.         return message;
  11.     }

js实现静态页面跳转传参的更多相关文章

  1. 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸

    小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...

  2. vue 页面跳转传参

    页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...

  3. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  4. 【转】request和response的页面跳转传参

    下面是一位园友的文章: jsp或Servlet都会用到页面跳转,可以用 request.getRequestDispatcher("p3.jsp").forward(request ...

  5. js中常用framesetiframe页面跳转传参方法实例大全

    logf的空间

  6. 微信小程序页面跳转传参

    1.传递参数方法   使用navigatior组件 <navigator url="/pages/pull/pull?title=lalla&name=cc" hov ...

  7. 微信小程序页面跳转传参方式

    //实现跳转的A页面 jump: function () { let a = 1; let b = 2; wx.navigateTo({ url: '/page/vipOrder/vipOrder?d ...

  8. 小程序页面跳转传参参数值为url时参数时 会出现丢失

    当参数的值为url的时候,  ?号   _  下划线   等等 都会被 截取掉,看不到,  这样在 另一个页面 options中  截取的url就不完全 let url="http://ba ...

  9. vue页面跳转传参

    跳转页 this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}}) 接收页 this.$route.params.参数名

随机推荐

  1. 【CF813E】Army Creation（主席树）

    [CF813E]Army Creation(主席树) 题面 CF 洛谷 翻译 by ppl 见洛谷 题解 考虑最多只会有\(K\)个相同的数 那么,也就是说,如果一个数会被选 那么,和它相等的数中,在 ...

  2. C++类间转换之dynamic_cast

    当在C++的基类与派生类之间转换时,其多态性充分显现出来: 本次只讨论  dynamic_cast  的用法. 在查阅资料后发现百度百科关于  dynamic_cast  (以及static_cast ...

  3. 洛谷P1012 拼数

    题目描述 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3时,3个整数13,312,343联接成的最大整数为:34331213 又如:n=4时,4个整数7,13,4 ...

  4. pandans导出Excel并将数据保存到不同的Sheet表中

    数据存在mongodb中,按照类别导出到Excel文件,问题是想把同一类的数据放到一个sheet表中,最后只导出到一个excel文件中# coding=utf-8import pandas as pd ...

  5. SQL Server 2008如何开启数据库的远程连接

    SQL Server 2008默认是不允许远程连接的,如果想要在本地用SSMS连接远程服务器上的SQL Server 2008,远程连接数据库.需要做两个部分的配置: 1,SQL Server Man ...

  6. Chrome工具使用

    (1) Chrome插件的使用 本来还想说FQ了,结果实验半天没成功,最后才知道公司已经邮件通知了,郁闷,FQ后我把我的插件重新装了一遍,觉得好像又懂了好多,记载下来我装的一些东西和有关PostMan ...

  7. js实现数组排序

    1. JavaScript的sort()方法 var array = [1,4,-8,-3,6,12,9,8]; function compare(val1,val2){ return val1-va ...

  8. leetcode 刷题日志 2018-03-26

    58. 最后一个单词的长度 分析:找最后一个非空格,向前找 int lengthOfLastWord(string s) { int i = s.find_last_not_of(' '); int ...

  9. 树dp...吧 ZOJ 3949

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5568 Edge to the Root Time Limit: 1 Secon ...

  10. matlab的rem()和mod()函数

    matlab的rem()和mod()函数 rem(x,y):求整除x/y的余数 mod(x,y):求模 rem(x,y)=x-y.*fix(x./y);  (fix()向0取整) mod(x,y)=x ...