两个HTML页面如何传递数据？
你好，
如果你不想使用像php这类的语言来进行数据的传递。
你可以使用h5的新存储特性，
你可以将数据存储到ocalStorage，一个页面存进去，另一个页面取出来就行了。
html是静态页面，可以使用url链接传值，比如a.html和b.html两个页面
a.html中有一个链接
1
进入b.html
可以使用到js，如下：
a.htm:
1
2
3
4
b.htm
function getArgs() {
var args = {};
var query = location.search.substring(1);
// Get query string
var pairs = query.split("&");
// Break at ampersand
for(var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('=');
// Look for "name=value"
if (pos == -1) continue;
// If not found, skip
var argname = pairs[i].substring(0,pos);// Extract the name
var value = pairs[i].substring(pos+1);// Extract the value
value = decodeURIComponent(value);// Decode it, if needed
args[argname] = value;
// Store as a property
}
return args;// Return the object
}
var str =getArgs();
alert(str['q']);//和input的name对应取值,
document.getElementById("qbox").innerHTML = str['q'];//然后赋值给DIV
希望能帮到你哦！
<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
其实要解决的是什么问题呢，就是说？后面拼接的参数取出来的问题
1.一个html中访问到另外一个html的路径上,在后面拼接上数据
2.在另外个html上通过dom对象模型中的地址栏对象location的search属性可以取到拼接的参数，或者直接取location，然后进行拆分
如果自己写的模块中关于这部分操作很多，那么我们可以对其抽取成一个js，然后再需要用到的页面（这个所说的页面就是被访问到的页面，想取参数的页面）通过script标签的src属性进行引入，注意这块路径别写错了，如果写路径老是写错，可以看看我之前发表的一篇关于路径怎么写的文章，看了后再也不会写错路径
具体代码如下：
在这里插入图片描述
js文件
在这里插入图片描述
HTML页面是如何适应不同分辨率的显示器
HTML页面何适应不同分辨率的显示器可以通过：响应式布局、自适应网页设计等方法：1、响应式布局设计：响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验...
如何将一个HTML页面嵌套在另一个页面中
2、在WWW上的一个超媒体文档称之为一个页面（page）。作为一个组织或个人在万维网上开始点的页面称为主页Homepage，或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Web）。Web页面也就是通常所说的网页，在...
用html如何制作一个简单的网页代码?
如下图所示，我们编写一个简单的html代码。3、单击“另存为”的功能选项，显示默认保存为编码为ANSI。4、我们将更改编码和文件名，将其更改为如图所示的图像并保存。5、然后返回到新创建的文件夹，发现有一个额外的html文件。6、最后，使用浏览器打开html文件，效果如图所示，简单的网页被成功编写。
怎么让html代码居中显示图片
html如何将图片居中？用HTML绘制页面时，恰当的图形布局可以使内容更具吸引力。这里有一个在HTML中将图片居中的简单方法。01打开记事本或其他代码编辑器，创建一个新的HTML文件，如下图所示 02用浏览器打开这个HTML文件，可以看到下图所示的效果。这幅画在整页的左边。03图片居中可以通过HTML中的align属性...
html如何两个页面之间相互传递数据
1、使用表单传递数据 两个html页面，a.html,b.html想。把a.html中的表单form中的id和pwd传到b.html中 <form action="b.html" method="post" name="formName"><\/form>要用form表单配合后台语言来传，发送类型POST和GET看你需求要换。2、使用JS传递接收数据 <html1 ><input type="text" value...
如何对一个HTML页面设置密码输入?
1、新建index.html页面。2、写入HTML文件，任何一个网页式的文件，必须要有HTML文件的元素，才算合格的网页。用记事本打开index.html 3、添加JS脚本，在<head>之间添加以下JS脚本代码<\/head><script language="JavaScript"><!--var password="";password=prompt('请输入密码 (本网站需输入密码才可...
html如何设置图片居中html如何设置图片居中对齐
html中图片居中的代码？html中使图片居中的代码是：img src=""alt=""align="center"\/> 怎样让html中的img标签居中显示？1、首先我们需要打开电脑，找到DW软件的快捷键，双击打开之后，新建一个html页面。2、然后我们会进入到DW的HTML页面的编辑页面，我们需要将新建的html页面进行一个保存。3、将网页...
HTML做的网页 如何使当前页面跳转到另一页面锚点处,在线等!!
<div class="placeholder">占位div2<\/div> <\/body> <\/html> 3、浏览器中打开t1页面（以Chrome浏览器为例，其他浏览器操作一样）。4、点击“跳转到t2页面a1”，Chrome浏览器会新开一个标签页打开t2页面，此时锚点a1在浏览器可视范围内并且位于页面的顶端。这样，外部锚点链接就设置成功了。
如何让两个页面的文字在一行?
需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。2、在index.html中的第一个<div>标签中，加入样式代码：style="float: left"。3、浏览器运行index.html页面，此时两个div标签的文字会在同一行上。
个人网页怎么制作怎么建立个人网站
如何制作自己的网页 自己制作网页的具体方法如下:工具\/原材料:Dreamweaver8.0。1.首先你要安装Dreamweaver软件，打开它启动它，然后点击创建一个html页面。2.设置表格中的行数和列数。3.单击“确定”以获得宽度为1000像素的表格。我们可以添加图片或文字作为bnner。4.在这里，让我们键入一行来演示。5.设置...
郜琪大唐： 跨域就可以直接调用另一个页面的javascript函数,前提是知道另一个页面的引用方式,例如在当前页打开.<br><br>pass.html<br><br><html><br><head><br><script><br>var pass2_window;<br>function open_pass2 () {<br>pass2_window = ...
康保县15588424947： 两个html页面之间怎样传参数 - ？
郜琪大唐： html是静态页面,可以使用url链接传值,比如a.html和b.html两个页面<br>a.html中有一个链接<br>1<br><a href=＂b.html?x=2&y=3＂>进入b.html</a><br>可以使用到js,如下:<br>a.htm:<br><br><form action=＂b.htm＂ ><br><input name=＂q＂ ...
康保县15588424947： 怎么在2个html页面间传值 - ？
郜琪大唐： path?key=val这样啊,怎么会不行?当然了接受请求的服务器要先处理这个变量.如果服务器不处理,希望第二个页面的js来处理,就用path#xxx,第二个页面在document.ready的时候读取window.location.hash.
康保县15588424947： 本地html文件间如何传递数据 - ？
郜琪大唐： 不知你传得时什么数据,如果数据量不大可以附在URL上 a跳转到b不要用超链接,使用js跳转,然后在b页面写js,加载时解析url a跳到b:window.location=＂b.html?mydata=xxxx＂; b页加载文档后执行js解析url传来的数据:var mydata = window.location.split(＂mydata＂)[1].split(＂&＂)[0];
康保县15588424947： 怎么传递变量值从一个html到另一个html - ？
郜琪大唐： 可以通过URL链接参数传递或者Post参数传递.
康保县15588424947： html前端如何将一个页面表单内的数据全部传递到另一个页面 - ？
郜琪大唐： 伪代码:form method=post action=另一个页面 参考:http://www.w3school.com.cn/tags/tag_form.asp
康保县15588424947： 两个html页面之间怎么用ajax传值呢? - ？
郜琪大唐： 两个HTML页之间不能用Ajax传值, Ajax只能与服务器交互数据.如果这两个HTML页是父子关系,或是同一框架页的兄弟关系,并且不产生跨域的话,可以直接通过JS互相访问对象,变量和函数, 无需传递.
康保县15588424947： HTML中页面之间的传值？
郜琪大唐： 通用方法用链接字符串传, 用JS也可以,但是传值页面必须是使用JS的WINDOW.OPEN打开的 比如一个登录页面,我想把用户名和密码传递过去,假设接受的页面是user_login.asp 你可以使用这样的链接将用户,密码传递过去,如下:user_login.asp?user=姓名&pwd=密码 ?后面就是你要传的值,不同的值用&分开 在ASP页面可以通过request.querystring(user)接受到
康保县15588424947： 框架内两个html怎么相互传值 - ？
郜琪大唐： 直接做链接跳转啊,比如一个在左边,一个在右边,然后把所有在右边显示的设定在右边框架就行了啊
康保县15588424947： 的多页面项目,多个html页面之间如何共享数据 - ？
郜琪大唐： 数据简单页面直接带参数访问 数据量大建立JS 每个页面引入
