js解析域名url地址上携带的参数

六月初六月初 JavaScipt 2023-02-12 20:03:37

数据传参再网站开发中可以说是必不可少的一项操作，那么关于数据传参有哪些方式呢？

常见传参方式：URL、H5 web storage、Cookie、Form 表单

本文就url地址传参方式和js传参后的数据解析给出详细代码解释


一、url传参优势：

    1.1、URL地址法简洁易用，可同时传递多个字符型参数

    1.2、URL地址法可以很方便的在页面之间切换并传递参数，无需额外的处理，基于正常情况比较不会性能损失

二、url传参劣势：

    2.1、URL传递参数长度受限，最大为2K

    2.2、URL只能传递字符型参数，传递中文时，由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误，参数包含中文时可能出现乱码或者参数接收错误

    2.3、信息泄露：URL地址在客户端可见，所以涉及隐私的参数需进行加密后才能进行传递，不加密传输会导致信息泄露，产生安全隐患

三、url传参js进行获取url参数解析
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//获取地址栏里面的域名及携带参数
			console.log("//获取地址栏里面的域名及携带参数")
			//window.location.href
			console.log("window.location.href")
			console.log("解析地址：http://test.com?name=六月初博客站&time=2023-02-12")
			console.log(getUrlParams('http://test.com?name=六月初博客站&time=2023-02-12'))
			function getUrlParams(url) {
			    // 通过 ? 分割获取后面的参数字符串
			    let urlStr = url.split('?')[1]
			    // 创建空对象存储参数
			    let obj = {};
			    // 再通过 & 将每一个参数单独分割出来
			    let paramsArr = urlStr.split('&')
			    for(let i = 0,len = paramsArr.length;i < len;i++){
			        // 再通过 = 将每一个参数分割为 key:value 的形式
			        let arr = paramsArr[i].split('=')
			        obj[arr[0]] = arr[1];
			    }
			    return obj
			}
		</script>
	</body>
</html>

代码解析：获取url完整地址使用split进行地址分隔，先通过?分隔，分隔后取？之后的数据。再通过&符号分隔，分割后循环提取分隔键名和键值。


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！