两个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版权协议,转载请附上原文出处链接及本声明。

原文链接:

两个html页面之间怎样传参数

html是静态页面,可以使用url链接传值,比如a.html和b.html两个页面

a.html中有一个链接

<a href=”b.html?x=2y=3″>进入b.html</a>

可以使用到js,如下:

a.htm:

<form action=”b.htm” >

<input name=”q” type=”text” value=””  />

<input type=”submit” value=”提交” id=”” />

</form>

b.htm

<html>

<body>

<div id=”qbox”></div>

<script type=”text/javascript”>

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

</script>

</body>

</html>

  希望能帮到你哦!

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表格,如下图所示。