两个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

html文件可以用手机浏览器打开。

从本质上来说,Internet( 互联网)是一个由一系列传输协议和各类文档所组成的集合,html文件只是其中的一种。这些HTML文件存储在分布于世界各地的服务器硬盘上,通过传输协议用户可以远程获取这些文件所传达的资讯和信息。

网络浏览器,能够解释HTML文件来显示网页,这是网络浏览器的主要作用。当你使用浏览器在互联网上浏览网页时,浏览器软件就自动完成HTML文件到网页的转换。

扩展资料

HTML文档分发的方法和其他计算机文件相同。不过,它们最常通过网页服务器的超文本传输协议或电子邮件传输。

万维网主要由从服务器通过HTTP协议向浏览器发送的HTML文档组成。但是,HTTP也可以被用于传输HTML之外的数据,例如图像、声音和其他内容。

为使浏览器了解如何处理接收到的文档,在传输文档时必须同时传递文件类型。这种元数据包含MIME类型(对于HTML 4.01或更早版本是text/html,而对于XHTML 1.0或之后的版本是application/xhtml+xml),以及字符编码(参见HTML字符编码方式) 。

在现在的浏览器中,和HTML文档一起发送的MIME类型影响文档的解读方式。和XHTML MIME类型一起发送的文档被认为是良构的XML,而语法错误会导致浏览器无法呈现文档。完全相同的文档如果和HTML MIME类型一起发送,则可能被正常显示,因为浏览器对HTML的语法检查更加松懈些。

W3C的推荐指出,遵循规定的推荐指引的XHTML 1.0文档可标记二者任一的MIME类型。XHTML 1.1还指出,XHTML 1.1文档应标有两种MIME类型。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存