JS获取地址栏url参数

本章内容分为三部分：

• window.location对象属性；
• 方法一；
• 方法二；

开始之前先简单了解一下

window.location对象属性

属性	描述
hash	从井号(#)开始URL
host	主机名和当前URL的端口号
hostname	当前URL的主机名
href	完整的URL
pathname	当前URL的路径部分
port	当前URL端口号
protocol	当前的URL的协议
search	从问号(?)开始的URL(查询部分)

---

方法一(推荐)：

url参数匹配问题解决方案（思路）：
①url截取?之后的字符串;
②以&为界截取参数键值对;
③将键值对放到一个map数组里;
④当需要匹配参数时，直接遍历map里面的key值;

 // 是否存在参数：existKey(key); 获取参数的值：getValueByName()
        function existKey(key) {
            //1、url截取?之后的字符串(不包含?)
            var pathSearch = window.location.search.substr(1);
            var result = [];
            //2、以&为界截取参数键值对
            var paramItems = pathSearch.split("&");
            console.log(paramItems);
            // 3、将键值对形式的参数存入数组
            for (var i = 0; i < paramItems.length; i++) {
                var paramKey = paramItems[i].split("=")[0];
                var paramValue = paramItems[i].split("=")[1];
                result.push({
                    key: paramKey,
                    value: paramValue
                });
            }
            // 4、遍历key值
            for (var j = 0; j < result.length; j++) {
                if (result[j].key === key) {
                    // console.log(key);
                    return true;
                } else {}
            }
            return false;
        }
        // 调用方式existKey("你需要匹配的参数值")
        //如果有参数值leaf就打印yes
        (existKey("leaf") ? console.log("yes") : console.log("no"));

1. window.location.search获取url地址?之后的字符串(包括?)
2. window.location.search.substr(1)
   获取url之后？之后的字符串(不包含?)

如：url地址: http://xxxxx:9010/test.html?leaf&le=2
window.location.search获取到的就是?leaf&le=2;
window.location.search.substr(1)获取到的就是leaf&le=2;

---

方法二：

一、JS获取地址栏url参数：

解决方案：使用正则表达式获取地址栏参数

// JS`正则表达式`获取地址栏url参数：
 function getUrlParam(name) {
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
     var r = window.location.search.substr(1).match(reg); // 匹配目标参数
     if (r != null) return unescape(r[2]);
     return null; // 返回参数值
 }
 // 调用方法
 var title = getUrlParam('title');

如果你想获取地址栏的其他参数，只需要执行 var 参数=getUrlParam('参数');
比如获取参数a,执行 var a=getUrlParam('a')就可以啦。简单又实用。

二、解决请求接口乱码问题
但是在我请求接口数据的时候，页面获取到是类似？？？这种乱码。

解决方案：
发送方使用decode 进行编码；
接收方使用的encode进行解码；

然后我是这样解决的：
1、发送方decodeURI编码：

function getUrlParam(name) {
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
     var r = window.location.search.substr(1).match(reg); // 匹配目标参数
     if (r != null) return decodeURI(r[2]);
     return null; // 返回参数值
 }

2、接收方encodeURI解码
根据后台接口拼接url中使用encodeURI：

var url='//xxx/xx/xx?'+'title='+encodeURI(title);

三、关于根据后台接口拼接url

 //根据后台接口拼接url
        var myUrl = '//后端提供的请求接口的地址' + 'ver=' + ver + '&id=' + id;
        $.ajax({
            type: "get",
            url: myUrl,//拼接后的url地址
            dataType: "json",
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success: function (data) {
                // ajax请求成功返回的方法
                // 比如页面的标题从接口获取
                var title=document.getElementById("title");
                title.innerHTML=data.title;
            },
            error: function (data) {
                // ajax请求失败返回的方法
                console.log("出错啦");
            }

        })

整理笔记，不断优化更新。如果有错误或可以优化的地方欢迎指出，互相学习，共同进步。
如果对你有用就点个小心心吧❤