html穿数据（html数据传输php）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
本篇文章给大家谈谈html穿数据，以及html数据传输php对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
两个静态html页之间的传值
在跳转后传递值，然后新页面获取值，根据值去添加案例的 class ，使对应的案例标题颜色改变
首先，父页面中 button 跳转采用
button 绑定 value 值
子页面中获取 vlaue 的值
因为我这边涉及多个，如果使用同一个 id 不能获取 vlaue 值，所以我在页面上写了一个空的按钮用来存储所点击的 vlaue 值
当点击 button 时， 把当前 button 的 vlaue 值赋值为** id="btn-case" ** 的 vlaue 值
然后在子页面中就可以通过去获取** id="btn-case"** 的** vlaue 值，来设置跳转后的默认显示，选项比较可以采用 switch case** 语句
注意 ：这里的 a ** 使用 alert（typeof(a)）;**弹出 String ，使用 switch case 语句时需要转换为 number 值，或者 **case **值设置为 ‘1’，添加引号。
跳转页面时把参数写入Url后的参数中，这种方法对与a标签跳转很方便，后面价格参数即可，下面来看看页面中怎么去应用
对于上面的案例可以直接在html上把参数带上，在打开的页面中获取。
如果对于input框输入，或者其他需要传入的值
html怎么把一个页面的数据传到另一个页面
html把一个页面的数据传到另一个页面的方法和操作步骤如下：
1、首先，打开我们计算机上的网页编程软件，然后创建两个新的html页面，如下图所示。
2、其次，第一个新的html页面的代码如下图所示，它是带有文本段落的空白页。 第一页将引用第二页的table表格，如下图所示。
3、接着，在浏览器中打开第一页，会看到只有一行文本，如下图所示。
4、然后，新的第二个html页面存储一个表，如下图所示。
5、随后，我们在浏览器中打开第二个html页面，可以看到表格的效果，如下图所示。
6、接着，在第一个html页面index1.html文件中添加iframe src="index2.html"/iframe 代码，并引用第二个html页面的index2.html中的table表格，如下图所示。
7、最后，保存代码后，在浏览器中打开index1.html页面，可以看到成功引用另一个页面的table表格，如下图所示。
两个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如何两个页面之间相互传递数据
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="nihao" id="text"/html
html2/html
如何用JS把HTML1中的text属性值nihao 传递给html2 在HTML2中有怎样用JS接收传递过来的数据并显示。
html1a href="html2.html?word=nihao"a
html2
js代码:
var str=location.href.search;//取地址参数部分
word = str.sbustr(str.indexOf('=')+1);
word就可以获得地址中传递的参数了；如果有多个参数可以用split函数
3、两个纯Html之间的传值实例
index1.htm页面
HTML
HEAD
TITLE New Document /TITLE//标题
SCRIPT LANGUAGE="JavaScript" //调用JavaScript方法
function show(){
var result = document.getElementByIdx("name").value; //获取值.
location.href="index2.htm?name="+result; // 链接跳转
}
/SCRIPT
style.input7 {color: #999;width:145px;height:20px;border: 1px solid #CCCCCC; font-size:12px;background-color: #fff;}//css样式
/style
/HEAD
BODY
input type="text" id="name" class="input7"input type="button" value="OK" onclick="show()"///输出
/BODY
/HTML
index2页面：
HTML
HEAD
TITLE New Document /TITLE
SCRIPT LANGUAGE="JavaScript"
function getvalue(name){
var str=window.location.search; //location.search是从当前URL的?号开始的字符串
if (str.indexOf(name)!=-1)//判断是否收到值
{
var pos_start=str.indexOf(name)+name.length+1; //解析获取值
var pos_end=str.indexOf("",pos_start);
if (pos_end==-1){
alert( str.substring(pos_start)); //输出
}
else{
alert("没有此值~~");
}
}
/SCRIPT
/HEAD
BODY
input type="button" onclick="getvalue('show')" value="GetValue"/
/BODY
/HTML
html如何传值
html静态页面间传值有以下三种方法：
方法一：
下面是javascrīpt的一种实现方法, 这个函数是通过window.location.href中的分割符获得各个参数。 有了这个函数，就可以在页面之间传递参数了。
/* *函数功能：从href获得参数 *sHref: ;arg2=re *sArgName:arg1, arg2 *return: the value of arg. d, re */
function GetArgsFromHref(sHref, sArgName)
{
var args = sHref.split("?");
var retval = "";
if(args[0] == sHref) /*参数为空*/
{
return retval; /*无需做任何处理*/
}
var str = args[1];
args = str.split("");
for(var i = 0; i args.length; i ++)
{
str = args[i];
var arg = str.split("=");
if(arg.length = 1) continue;
if(arg[0] == sArgName)
retval = arg[1];
}
return retval;
}
方法二：
html地址传递参数进行其他事情.
scrīpt /* 用途: 接收地直栏参数 取id=1 根据ID的值 */
urlinfo=window.location.href; //获取当前页面的url
len=urlinfo.length;//获取url的长度
offset=urlinfo.indexOf("?"); //设置参数字符串开始的位置 newsidinfo=urlinfo.substr(offset,len)//取出参数字符串 这里会获得类似“id=1”这样的字符串
newsids=newsidinfo.split("=");//对获得的参数字符串按照“=”进行分割 newsid=newsids[1];//得到参数值
newsname=newsids[0];//得到参数名字
/scrīpt
方法三：
做中英转换的时候，要准确的获取参数并取出，所以做了一个简单的html中用js获取当取地址栏的一个Object。
里面有三个方法：
1、request.QueryString("参数")//获取指定参数，返回字符串;
2、request.QueryStrings();//获取全部参数，并返回数组;
3、 request.setQuery("参数","参数的值");//如果当前地址栏有此参数，那么将更新此参数，否则返回一个新的地址栏参数字符串。
例如：当前地址栏参数字符串为：?name=asite=never_online alert(request.setQuery("name","blueDestiny")) 如果地址栏参数中有"name"，那么返回?name=blueDestinysite=never_online setQuery 方法有自动追加参数的功能。如：当前地址栏参数字符串为：?site=never_online alert(request.setQuery("name","blueDestiny")) 则返回?site=never_onlinename=blueDestiny 同理，如果地址栏没有参数，也会自动追加参数 alert(request.setQuery("name","blueDestiny")) 返回?name=blueDestiny
关于html穿数据和html数据传输php的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
