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

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^