如何在url带参数进行跳转，并在另外一个页面接收数据打印出来

最新推荐文章于 2023-08-20 09:00:00 发布

hello big_bear

最新推荐文章于 2023-08-20 09:00:00 发布

阅读量2.1k

点赞数 2

分类专栏： html基础文章标签： js html javascript url 前端

本文链接：https://blog.csdn.net/big_beer/article/details/115378238

版权

html基础专栏收录该内容

15 篇文章 3 订阅

订阅专栏

学习目标：

如何在url带参数进行跳转，并在另外一个页面接收数据打印出来。（从一个页面通过url的方式把数据发送到另外一个页面来接收）

学习内容：

a页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>a页面</title>
	</head>
	<body>
		book1:<input type="text" value=""/>
		book2:<input type="text" value=""/>
		<button onclick="a()">跳转</button>
	</body>
</html>
<script>
		function a(){
			var book=document.getElementsByTagName('input');
			var book1=book[0].value + '';//定义book1获取第一个input的值
			var book2=book[1].value + '';
			
			window.location.href = 'b.html?book1=' + book1 + '&book2=' + book2 ;//带参数跳转
		}
</script>

b页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>b页面</title>
	</head>
	<body>
		这里是b页面:获取的a页面输入url中的值为：
		book1=<span id="a1"></span> ,
		book2=<span id="a2"></span>
	</body>
</html>
<script>
	function GetUrl(name) {
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
	    var r = window.location.search.substr(1).match(reg);
	    if (r!=null) return unescape(r[2]); return null;
	}//定义GetUrl的方法，作用是对url的字符串进行切割
	
	window.onload=function(){
		let book1=GetUrl("book1");//定义一个book1的变量接收url中book1的值
		let book2=GetUrl("book2");
		console.log(book1,book2);//f12打印一下
		
		let book = document.getElementsByTagName('span');
		book[0].innerText=book1;
		book[1].innerText=book2;
	}
</script>

效果图：

a页面：输入值后点击跳转。

在这里插入图片描述

b页面：接收url中的数据并打印出来。

在这里插入图片描述

学习总结：

上面主要是使用了正则表达式的方法。
function GetUrl(name) {
var reg = new RegExp("(^|&)" + name + “=([^&]*)(&|$)”,“i”);
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
用这个方法来对传来的url进行字符串的切割获得数据。
缺点是会使数据直接显示在url上，很容易被人看见。
优点是快。
比较适合传送类别、id之类的数据。

hello big_bear

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
如何在url带参数进行跳转，并在另外一个页面接收数据打印出来

学习目标：如何在url带参数进行跳转，并在另外一个页面接收数据打印出来。（从一个页面通过url的方式把数据发送到另外一个页面来接收）学习内容：a页面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>a页面</title> </head> <body> book1:<input type="text"
复制链接

扫一扫