专栏首页国产程序员页面参数传递

页面参数传递

在做页面的时候,比如用户数据(用户头像,名称,年龄)这些信息,因为大部分页面都要用,之前是通过url地址传,另一页面接收。考虑到这样做会让url过长,因此,尝试使用cookie,把固定的值保存在cookie,其它页面拿出来就可以使用。

url传值与取值的过程

url通过跳转页面,给跳转页的url问号后拼接参数的方法传值

1//问号后的userId  /  dialogId都是要传的参数
2//如果有多个参数,就用“&”拼接
3window.location.href = 'doctor_ask.html?userId=' + userId + "&dialogId=" + dialogId;

在doctor_ask.html页面,把在url中的参数取下来,要使用一个方法getQueryString(),其中有一个方法是用来获取url中含有中文参数的:

 1// 获取url后的某一个query的值 
 2function getQueryString( name ) {
 3    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 4    var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
 5    var context = "";
 6    if (r != null)
 7    context = r[2];
 8    reg = null;
 9    r = null;
10    return context == null || context == "" || context == "undefined" ? "" : context;
11}
12
13//获取Url中中文参数的方法
14function getQueryUrlString(name) {
15    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
16    var r = window.location.search.substr(1).match(reg);
17    if(r != null) {
18        return decodeURI(r[2]);
19    }
20    return "请选择";
21}

使用方法获取参数:

1//调用方法获取参数,方法中的参数名是一个字符串
2var userId = getQueryString('userId')

通过cookie方法传值

我这里使用的是jQuery cookie,因此需要先加载jQuery与cookie:

1<!--使用cookie-->
2<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
3<script src="http://code.changer.hk/jquery/plugins/jquery.cookie.js"></script>

在其中一个页面,比如首页,将要保存的值存放在cookie.

如果仅是一个id,直接使用键值对的方法保存即可:

1//将id保存在cookie
2$.cookie('doctorId', '11916111-f2eb-11e4-b756-f40669963d49');
3//从cookie中取出id
4var doctorId = $.cookie('doctorId');

如果是多个值,需要将多个值放在对象中,保存这个对象:

1//将多个值存放在对象中
2var userData = {
3   userId: "11916122-f2eb-11e4-b756-f40669963d49",
4   patientName: "张丽",
5   patientAge: 23,
6   patientSex: "F"
7}
8//将这个对象保存在cookie,它的键是对象名称,值为JSON.stirng(),目的是将这个对象解析为字符串,因为cookie的键与值都是字符串
9$.cookie('userData' , JSON.stringify(userData));

如果在其它页面使用这个cookie中对象,可以取出这个对象并将对象转换为字符串

1var userData = $.cookie('userData');
2if(userData){
3//JSON.parse()  将字符串解析为对象,方便使用
4   userData =  JSON.parse(userData);    
5};

两个知识点

1//字符串解析为对象
2JSON.parse(对象名称);
3//对象解析为字符串
4JSON.stringify(对象名称);

本文分享自微信公众号 - 国产程序员(Monday_lida)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何选择腾讯云服务器配置?

    云服务器的配置选择,和网站或应用的类型、访问量、数据量大小、程序质量等因素有关,建议和您的网站或应用的开发技术人员沟通,选择最适合您的配置。

    勤劳的小蜜蜂
  • Python3内置模块之base64编解码方法小结

    Base64 是网络上最常见的用于传输 8Bit 字节码的编码方式之一,Base64 就是一种基于 64 个可打印字符来表示二进制数据的方法。可查看 RFC20...

    一墨编程学习
  • 【php设计模式】代理模式

    主要解决在直接访问对象时带来的问题,比如说:要访问的对象在远程的机器上。在面向对象系统中,有些对象由于某些原因(比如对象创建开销很大,或者某些操作需要安全控...

    码缘
  • 【php设计模式】门面模式

    门面模式又叫外观模式,用来隐藏系统的复杂性,并向客户端提供了一个客户端可以访问系统的接口。这种类型的设计模式属于结构型模式,它向现有的系统添加一个接口,来隐藏系...

    码缘
  • 3-2 使用loader打包静态资源(图片)

    上一节我们成功打包并展示了一张图片。可是我们看到最终输出的图片名称是一串hash值,如果我们希望其展示的是原来的名称呢?可以进行如下配置:

    love丁酥酥
  • 4-STM32物联网开发系统方案微信小程序篇

    https://www.cnblogs.com/yangfengwu/p/10979101.html

    杨奉武
  • APP (UniAPP) 微信支付回调的 HTTP_RAW_POST_DATA 报错情况 (wxpayv3)

    {"appid":"wxdd8xxxxxxxxxxx30","bank_type":"CFT","cash_fee":"1","fee_type":"CNY",...

    用户3056046
  • 点击一个web网页的流程和所用协议(计算机网络)

    客户方启动浏览器; 客户在浏览器的地址栏键入URL; 浏览器分析URL,找到信息资源所在主机地址; 与该主机(服务器)建立TCP连接(端口号80); 向...

    葆宁
  • 5-STM32物联网开发系统方案微信小程序篇

    https://www.cnblogs.com/yangfengwu/p/11037653.html

    杨奉武
  • wordpress搭建网站需要掌握和了解哪些知识点?

    对于很多完全没有接触过wordpress和网站搭建的用户来说,还是比较难的,需要学习和了解的知识点还是很多的,但是对于稍微熟悉了的用户来说基本上就是分分钟的事儿...

    wordpress建站吧

扫码关注云+社区

领取腾讯云代金券