两个HTML页面之间的传值

最新推荐文章于 2021-06-04 06:50:39 发布
最新推荐文章于 2021-06-04 06:50:39 发布
阅读量1k 收藏 22
点赞数 3
分类专栏： JavaScript 文章标签： 页面传值 两个页面之间传值 url传值 cookie传值 url传值中文乱码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42335214/article/details/84189734
版权
  1. 通过url传值
  2. 通过cookie传值
  3. 当然传值方式不只是这两种，我就简单说说这两种传值方式。

url传值

首先写两个简单页面，这里就写了test8.html和test10.html。

test8.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<input type="text" id="text" value="" />
		<button type="button" id="btn">----></button>
	</body>
	<script type="text/javascript">
		$(function(){
			$("#btn").click(function(){
				var msg=$("#text").val();
				window.location.href = "test10.html?msg="+ msg;
			});
		});
	</script>
</html>

test10.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<p id="result"></p>
	</body>
	<script type="text/javascript">
		$(function(){
			//URL传值
			var Request = new Object();
			Request = GetRequest();
			var val= Request["msg"]; 
			$("#result").text(val);
		});
		//URL传值解析函数
		function GetRequest() {
			var url = decodeURI(location.search); //获取url中"?"符后的字串 
			var theRequest = new Object();
			if (url.indexOf("?") != -1) {
				var str = url.substr(1);
				strs = str.split("&");
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
				}
			}
			return theRequest;
		}
	</script>
</html>

写好两个页面好我们就可以测试了，测试如下。
test8.html
按下按钮后，跳到test10.html
test10.html
在url中我们可以看到test8.html页面传来的数据msg=42525。

cookie传值

test8.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<input type="text" id="text" value="" />
		<button type="button" id="btn">----></button>
	</body>
	<script type="text/javascript">
		$(function(){
			$("#btn").click(function(){
				var msg=$("#text").val();
				$.cookie("text",msg);
				window.location.href = "test10.html";
			});
		});
	</script>
</html>

test10.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<p id="result"></p>
	</body>
	<script type="text/javascript">
		$(function(){
			var val=$.cookie("text");
			$("#result").text(val);
		});
	
	</script>
</html>
  • 在url解析函数中要加上decodeURI解码，要不然会出现乱码。
  • 利用url传值不安全，会暴露数据。
  • cookie传值也就是利用cookie保存数据再获取数据.
背包Boy
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html传值方式有哪几种,关于html页面间传值的几种方法
weixin_39683021的博客
06-26 3240
问题因最近尝试实现客户端与服务端分离，服务端只提供接口，客户端用html+js实现，分成两个独立的项目部署，因项目是个人项目，客户端展示不考虑使用像Angular、Vue、Native这种前端框架实现，于是全部使用静态页面实现，请求数据用ajax，在开发的过程中，就遇到了页面之间传值的问题。解决方法post提交表单跳转的方式肯定不行了，因服务端并不处理这些请求参数，连到达客户端的机会都没有，此时只...
html页面之间的传值
m0_51512211的博客
06-19 1853
利用location.search可以得到页面传过来的值，实现页面之间的传参
关于html页面之间传值的几种方式
翎墨袅
10-30 1847
1、get方式，url携带参数 可以通过window.location.search获取url上的参数。如下面的示例。 a.html 跳转 b.html getUrlParam.js UrlParam = function() { // url参数 　　var data, index; 　　(function init() { 　　　　data = []; //值，如[[“1”,“2”],[...
两个html页面间如何传递数据
qq_41209003的博客
12-27 1万+
两个html页面间如何传递数据 最近自己再做一些web的开发项目，在不同的html之间传递数据我总结了3种方式。 一.通过表单简单的传输数据，利用js代码接收传递的数据，注意method属性要设为get。 <form id="form" action="data.html" method="get"></form>//action的值是你的目的html 在你的目的html中...
html页面互相传值的问题解决方案
09-28
首先，我们来看一个简单的例子，它包含两个HTML页面：a.html 和 b.html。在a.html中，我们创建了一个表单（`<form>`），其中有一个隐藏的输入元素（`<input type="hidden">`）用来存储要传递的值。这个表单通过GET...
ajax\HTML 页面与页面之间传值
12-21
这种方法允许两个或多个窗口之间安全地传递消息，即使它们的源不同。例如： ```javascript // 父页面发送数据 window.postMessage({data: 'message'}, '*'); // 子页面接收数据 window.addEventListener('...
javascript 两个页面之间传值
10-17
以上就是在JavaScript中两个页面之间传值的常见方法。每种方法都有其适用场景，根据实际需求选择合适的方式。记住，跨域安全问题在使用这些方法时也需要考虑，特别是涉及到`localStorage`和`postMessage`时。在实际...
C#实现.net页面之间传值传参方法汇总
09-04
另一个在页面间传递数据的方式是使用`HiddenField`控件，它将值编码并在HTML中发送，但对用户不可见。这种方法适用于不希望显示在URL中的数据，但仍然需要在页面间保持。 8. **Server.Transfer**： 而不是使用`...
html页面传值
06-11
HTML页面传值是Web开发中的基础技能，主要涉及在不同HTML页面之间或者同一页面内传递数据的方法。在本文中，我们将深入探讨几种常见的HTML页面传值技术，包括URL参数、表单提交、cookies、sessionStorage和...
如何在两个html页面之间传值
krismile__qh的博客
07-31 1616
方式一： 利用js代码（getUrlParam.js）可以在我的下载中查找，能够获取到request中携带的参数。 主要用法： 1. 在页面上导入getUrlParam.js资源 <script type="text/javascript" src="resources/js/getUrlParam.js"></script> 2. 直接利用UrlParam.方...
在两个html页面之间传值小示例
ABC__D的专栏
03-08 1万+
最近在搞前端的一些开发，在两个页面之间进行传值，虽然搜了写资料但是不是自己想要的，因为用到了一些框架，所有内容相当于在一个html中，与普通的两个独立的html页面直接的传递值的方法不太一样，记之，以备用。 a.html 如下： New Document function to(){ var getval =document
静态页面跳转传参
school11的专栏
11-21 727
从a.html 跳转到b.html 并吧 a.html 的值传入b.html a.html [html] view plaincopy html>    head>     title> New Document title>       script>         function   to (){         
前端在html页面之间传递参数的方法
热门推荐
有效youxiao的博客
06-29 6万+
概念图 目标 前端在html页面之间传递参数的方法 项目中经常会出现的一种情况，有一个列表，比如商品列表，点击列表中的某一项商品，跳转至详情页面。跳转页面时，我们需要传递一个参数过去，这样我们才能通过这个参数进行数据请求，然后根据后台返回的数据来生成详情页面。因此，通过a标签跳转的方式，肯定是行不通的。&nbsp; 写form表单，提交可以传递参数，除此以外，window.locati...
两个html页面之间怎么传递参数值
evilcry2012的专栏
11-03 2343
两个html页面之间怎么传递参数值 小柒92469 | 浏览 15927 次  问题未开放回答 |举报 推荐于2017-10-09 14:58:07 最佳答案 使用Cookie传递参数 ，a页面保存Cookie，b页面读取，代码如下： a页面 1 2 3 4 5 6 7 8
两个html页面怎么获得传递的参数,两个网页之间传递参数
weixin_39787628的博客
06-04 718
1.JavaScript通过URL传值(传递一下简单的少量的数据。URL对长度有一定限制)(不建议)首先通过URL将参数传递到URL中(在A页面中传递)location.href="url?name=xuanyuan" //问号后面为需要传递的参数如何有多个后面解&sex="man";现在需要获取指定URL中的参数(在B页面也就是需要参数的页面获取)/*** 获取指定的URL参数值* UR...
两个servlet之间传值源码
最新发布
04-06
以下是使用request对象在两个servlet之间传值的示例代码： 在发送值的servlet中： ```java // 设置要传递的值 String value = "Hello World!"; // 获取request对象 HttpServletRequest request = ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值