两个HTML页面如何传递数据?

两个HTML页面如何传递数据?,第1张

一.通过表单简单的传输数据,利用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 = 0i <strs.lengthi++) {

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、首先在电脑打开eclipse软件。然后创建int参数age,赋值为21。代码:int age=21。

2、参见静态方法addAge(int a),内有参数a。

3、然后在addAge方法中,增加a增值的代码。

4、然后再从addAge方法中,输出a增加后的值。

5、然后在main方法中,将age的值传递给a。

6、然后在main方法中,输出数值传递之后的效果。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7012799.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存