本章内容分为三部分：
- 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"));
- window.location.search获取url地址?之后的字符串(包括?)
- 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("出错啦");
}
})
整理笔记，不断优化更新。如果有错误或可以优化的地方欢迎指出，互相学习，共同进步。
如果对你有用就点个小心心吧❤
