JavaScript 获取 url 上的指定参数值

Unsplash

假设现在有 A 和 B 两个页面,当我们从 A 页面跳转到 B 页面的时候,需要将 A 页面的两个值传递到 B 页面当中,前端可以通过读取缓存的方式,从 B 页面获取到 A 页面的数据,但这样的方式,会让其他端上的数据不同步,所以我们往往通过 url 传参的方式,在 A 页面跳转到 B 页面的时候,通过字符串拼接的方式,将 A 页面上的值链到 url 上,可参考下面的栗子

A 页面

<a href="javascript:void(0);" class="date_btn" data-year="2017" target="_blank">12</a>

$('body').on('click', '.date_btn', function(e){
    e.preventDefault();
    var a_year  = $(this).data('year'),
        a_month = $(this).text(),    
        link    = "index.php?year=" + a_year + "&month=" + a_month;
    window.location = link;
});

假设 B 页面的链接为 https://www.google.com/index.php?year=2017&month=12,则 B 页面获取参数值的方式如下

var date = {
    init: function(){
        this.bindCusEvent();
    },
    getQueryString: function(name) {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"),
            r   = decodeURI(window.location.search).substr(1).match(reg);
        if(r != null){
            return  decodeURI(r[2])
        }else{
            return "";
        }
    },
    bindCusEvent: function() {
        var that  = this,
            b_year  = that.getQueryString('year'),
            b_month = that.getQueryString('month');
        // 利用得到的参数值进行其他操作,如Ajax请求
    }
}

date.init();
End of File

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏抠抠空间

Django项目实战之用户头像上传与访问

1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> <meta char...

56570
来自专栏电光石火

eclipse汉化

以前一直没发出来,今天整理时发现就发出来了! Eclipse对于语言包建立了新的子项目,叫做Babel。网址为:http://www.eclipse....

278100
来自专栏前端人人

React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,...

34360
来自专栏lonelydawn的前端猿区

初学redis之windows服务配置与启动

初学redis首先要配置好服务, redis在Linux上的安装只要按照官方指导来,很快很简单。 下面来谈谈redis在windows上的安装。 官网虽然没给r...

24250
来自专栏13blog.site

Intellij IDEA查看所有断点

项目中打的断点太多,有时自己也想不到打在哪里了,也不知道哪些方法、哪些代码行上打了断点,在IDEA中如何查看所有断点呢? 方法如下: step 1 IDE...

39590
来自专栏张善友的专栏

使用密码记录工具keepass来保存密码

在第一章,曾经给过您建议,密码不要保存在文档中,那样不安全,如果密码很多而且又很复杂,人的大脑是不可能很容易记住的,只能记录下来,如果不能记在文档中那记在哪里呢...

47590
来自专栏云计算认知升级

【腾讯云的1001种玩法】Laravel 整合 COS 对象存储服务,享受无限容量存储服务

使用Laravel 也可以轻松接入腾讯云对象存储,只需要执行简单的几行命令,就可以轻松在你的Laravel项目中,享受COS提供的海量数据存储能力。

1.6K00
来自专栏从零开始学自动化测试

python接口自动化12-案例分析(csrfToken)

前言: 有些网站的登录方式跟前面讲的博客园和token登录会不一样,把csrfToken放到cookie里,登录前后cookie是没有任何变化的,这种情况下如何...

33070
来自专栏电光石火

eclipse汉化

以前一直没发出来,今天整理时发现就发出来了!

24750
来自专栏美奔科技

web站点应用之路_wdcp面板部署篇(一)

熟悉的人都知道,搭建web几乎是最简单的了,一般有两种方式来搭建web站点.一种是自己先安装各类环境,比如php+apache+mysql ,或者是asp.ne...

28750

扫码关注云+社区

领取腾讯云代金券