获取URL参数(页面之间的数据传递)

最新推荐文章于 2023-08-30 10:36:11 发布

hcoke

最新推荐文章于 2023-08-30 10:36:11 发布

阅读量579

点赞数

分类专栏： js JavaScript 文章标签： javascript 前端 JavaScript

本文链接：https://blog.csdn.net/m0_62962469/article/details/123905761

版权

JavaScript 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

第一个登录页面，里面有提交表单，action提交到index1.html页面。

第二个页面可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果。

第二个页面利用了URL里面的location.search参数，获取到第一个页面中的参数。

第二个页面需要把这个参数提取。

去掉？用substr

利用‘=’分割键和值 split=('=')。

index.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="index1.html" >
			用户名:<input type="text" name="uname" id="" value="" />
			<input type="submit" name="" id="" value="登录" />	
		</form>
	</body>
</html>

index1.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			
		</div>
		<script type="text/javascript">
		var div = document.querySelector('div');
			console.log(location.search);  //?uname=andy
			//1.先去掉? substr('起始的位置',截取几个字符);
			var params = location.search.substr(1);
			console.log(params);
			//2.利用=把字符串分割为数组 split('=');
			var arr = params.split('=');
			console.log(arr);
			//3.把数据写入div中
			div.innerHTML = arr[1] + '欢迎你';
		</script>
	</body>
</html>