html页面之间只利用js实现跳转

独梧锁雾

于 2021-09-10 11:22:50 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_43423320/article/details/120218291

本文展示了如何使用JavaScript实现从一个HTML页面到另一个HTML页面的跳转，并在跳转过程中传递参数。在请求页面中，通过jQuery监听按钮点击事件，将变量拼接到URL并使用`window.location.href`进行页面跳转。在接收页面中，解析URL查询字符串以获取传递的参数，并更新页面元素显示这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html页面之间只利用js实现跳转

一：
请求页面

<button type="button" id="jump">jump</button>
<script src="../js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$("#jump").click(function(){
				var name='lisi';
				var url="./text2.html?name="+name;
				window.location.href=url;
			})
</script>

在这里插入图片描述
接收页面

	<body>
		<p>text2</p>
		<p id="textp"></p>
	</body>
	<script src="../js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		function getReqParam(variable) {
		    console.log(window.location.search);
		    var query = window.location.search.substring(1);
		    var vars = query.split("&");
		    for (var i = 0; i < vars.length; i++) {
		        var pair = vars[i].split("=");
		        if (pair[0] == variable) {
		            return pair[1];
		        }
		    }
		    return ("");
		}
		
		$(document).ready(function(){
			var name=getReqParam("name");
			$("#textp").html(name);
		})
	</script>

在这里插入图片描述