html页面传参（html 传参数）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
本篇文章给大家谈谈html页面传参，以及html 传参数对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
html页面跳转传递参数
页面跳转的时候可能需要一些数据的传输，如商品跳转到详情页需要传一个id过去。那么在html中如何来实现呢？
简单的来说就是通过location.href设置路径的时候通过?拼接的形式拼接进去一些参数。然后在b页面通过地址栏的信息来拿到这些参数，从而进行不同的数据渲染。
例子：
a页面内容：
b页面:
两个html的页面之间怎么传递参数啊
1、首先在电脑打开eclipse软件。然后创建int参数age，赋值为21。代码：int age=21。
2、参见静态方法addAge（int a），内有参数a。
3、然后在addAge方法中，增加a增值的代码。
4、然后再从addAge方法中，输出a增加后的值。
5、然后在main方法中，将age的值传递给a。
6、然后在main方法中，输出数值传递之后的效果。
html网页如何传递接收地址参数?
通过js获取当前地址的URL后面的参数然后解析出id的值 再 通过dom操作修改script标签的src值即可。
html网页：超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
若地址栏URL为：abc.html?id=123url=，那么，但你用上面的方法去调用：alert(GetQueryString("url"));则会弹出一个对话框：内容就是 。如果用：alert(GetQueryString("id"));那么弹出的内容就是 123 啦；当然如果你没有传参数的话，比如你的地址是 abc.html 后面没有参数，那强行输出调用结果有的时候会报错：
两个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"
titlea/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.length0 username) {
SetCookie("username", username);
/*跳转到b.html页面*/
document.location = "b.html";
}
}
function $(id) {
return document.getElementById(id);
}
/script
/head
body
div id="main"
divspan请输入你的名字/spaninput 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"
titleb/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.length0) {
$("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版权协议，转载请附上原文出处链接及本声明。
原文链接：
关于html页面传参和html 传参数的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
