两个HTML页面如何传递数据？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了两个HTML页面如何传递数据？相关的知识，希望对你有一定的参考价值。
一.通过表单简单的传输数据，利用js代码接收传递的数据，注意method属性要设为get。<form id="form" action="data.html" method="get"></form>//action的值是你的目的html
在你的目的html中可通过url接收传递的数据，并将数据保存在一个对象中。
<script type="text/javascript" charset="utf-8">
window.onload = function()
var url = window.location.search;//location.search是从当前URL的?号开始的字符串
console.log(url);
var Request = new Object();
if (url.indexOf('?') != -1)
var a = '';
var str = url.substr(1) //去掉?号
strs = str.split('&');
for (var i = 0; i < strs.length; i++)
a = strs[i].split('=')[0]；
Request[a] = decodeURI(strs[i].split('=')[1]);//解码,生成获取信息的对象
console.log(Request[a]);
console.log(Request);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
注意这种方式传递中文数据需要用decodeURIComponent()或decodeURL（）函数解码，unescape（）现在似乎已经淘汰了。
然后利用document.write()或innerHTML等方法或函数将数据显示在网页上。此种方法适合自己平时写JS的小练习，此种方法无法将数据保存下来。
2.使用Cookie传递参数
下面是简单的实例，a页面保存Cookie，b页面读取。
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a</title>
<script type="text/javascript">
/***
* @param string cookieName Cookie名称
* @param string cookieValue Cookie值
*/
function SetCookie(cookieName,cookieValue)
/*设置Cookie值*/
document.cookie = cookieName + "=" + escape(cookieValue)
function login()
var username = $("user").value;
if(username.length>0 && username)
SetCookie("username", username);
/*跳转到b.html页面*/
document.location = "b.html";
function $(id)
return document.getElementById(id);
</script>
</head>
<body>
<div id="main">
<div><span>请输入你的名字</span><input type="text" id="user" /></div>
<div>
<input type="button" onclick="login()" value="提交" />
</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
b.html
<html>
<head>
<meta charset="UTF-8">
<title>b</title>
<script type="text/javascript">
/***
*读取指定的Cookie值
*@param string cookieName Cookie名称
*/
function ReadCookie(cookie_name)
//判断是否存在cookie
if (document.cookie.length > 0)
//查询cookie开始部分
cookie_start = document.cookie.indexOf(cookie_name + "=")
//如果存在
if (cookie_start != -1)
//计算结束部分
cookie_start = cookie_start + cookie_name.length + 1
cookie_end = document.cookie.indexOf(";", cookie_start)
//如果已经是最后一个cookie值，则取cookie长度
if (cookie_end == -1)
cookie_end = document.cookie.length
//获取cookie值，unescape对特殊字符解密
return unescape(document.cookie.substring(cookie_start,cookie_end))
//其它情况返回空
return ""
function $(id)
return document.getElementById(id);
function init()
var username = ReadCookie("username");
if(username && username.length>0)
$("msg").innerHTML = "<h1>欢迎光临," + username + "!</h1>";
else
$("msg").innerHTML = "<a href='a.htm'>请录入名字</a>";
</script>
</head>
<body onload="init()">
<div id="msg"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
此种方法也是适合自己平时写JS的小练习，此种方法无法将数据保存下来。
3.通过web服务器利用前后端交互
前后端交互又可分为表单交互和url参数交互。表单交互是指在HTML中创建一个表单，用户填写表单后提交给服务器，服务器收到表单后返回处理结果。其大致构成如下：
URL参数经常用于浏览器向服务器提交一些请求信息。其流程图大致如下：
例如利用nodejs与json文件相连接，实现对本地json数据的增删改查，在不同网页间传递数据。
————————————————
版权声明：本文为CSDN博主「想躺」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41209003/article/details/103739371 参考技术A 其实要解决的是什么问题呢，就是说？后面拼接的参数取出来的问题
1.一个html中访问到另外一个html的路径上,在后面拼接上数据
2.在另外个html上通过dom对象模型中的地址栏对象location的search属性可以取到拼接的参数，或者直接取location，然后进行拆分
如果自己写的模块中关于这部分操作很多，那么我们可以对其抽取成一个js，然后再需要用到的页面（这个所说的页面就是被访问到的页面，想取参数的页面）通过script标签的src属性进行引入，注意这块路径别写错了，如果写路径老是写错，可以看看我之前发表的一篇关于路径怎么写的文章，看了后再也不会写错路径
具体代码如下：
在这里插入图片描述
js文件
在这里插入图片描述
如何在两页面之间传递JSON数据
在A页面生成的JSON数据 传递到B页面，或者在A页面将JSON传递到ASHX 然后再将JSON传递并跳转到B页面
参考技术A 直接post就可以啊，或者在B页面通过类似于file_get_content的方式读取A页面的json
以上是关于两个HTML页面如何传递数据？的主要内容，如果未能解决你的问题，请参考以下文章
HTML5中window.postMessage，在两个页面之间的数据传递