<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、点击屏幕交互点击是最常用的手势，经常用于页面切换。点击引导可以作为注释，用户可以理解H5内容，使用户能够按照H5的节奏 *** 作。例如，在《带上希望的种子去北京》中，用户可以点击手势“检查”行李箱，详细查看H5设计的内容。
2、连续点击交互
连击交互在游戏类中的应用比较多。在游戏类H5中，通常由连续点击生成的数值关联积分排名，具有竞技性质的H5可以进一步吸引用户参与。例如，《漫威电影十周年》的“揍”灭霸小游戏，用户继续点击屏幕，10秒内的点击次数就会计算出整个网络排名。
3、长按交互
长按是用户根据H5引导长时间触摸页面。长按交互用户需要保持手指静止状态，并在设计时提示H5播放进度参考，以避免乏味。例如，从腾讯公益的《敦煌未来博物馆》设计的风化过程来看，用户点击手机即可看到壁画随着年份推移逐渐风化的场景，还可以唤醒用户心中的文化保护意识。
4、滑动交互
拖拽交互必须在长按交互的基础上滑动，从一个点拖动到另一个点可以让用户自行控制速度。适合图片展示类的H5。例如，在《睡姿大比拼》中，用户可以拖动角色肢体来创建各种有趣的睡眠姿势。
5、重力交互
重力交互是一个非常直观的表达形式，用户可以轻松get到H5获得乐趣，这意味着手机硬件能升级给H5设计带来了更多的可能性。利用重力感应、陀螺仪、速度加速等硬件，对H5的玩法进行创新，提高用户的代入感。例如，安装在《一“陆”狂飙，极速挑战》上的赛车游戏是通过手机重力传感来调整小车的方向。
6、全景交互
全景交互在屏幕中以360度展现所有场景，用户可以通过滑动移动场景。这种H5格式(如VR)需要关注整个场景的设计，边界连接要足够顺畅，全景加载内容较大，一定要注意用户等待和屏幕卡顿的问题。例如，华为出品的《我的荣耀5G世界》中全景互动展示了未来丰富多彩的5G世界。
以上几种就是现目前比较常见的H5交互元素，如有帮助请采纳~
html与服务器的交互常见有以下几种，这里以wamp服务器为准，php后端语言为例1、使用form表单，form表单通常用于采集用户输入，再传输给php脚本，进行 *** 作。form表单的特点是必须由用户点击提交按钮，才可以被服务器接收。注意form最重要的两个属性：action，method。
2、使用ajax对象，与服务器建立交互。与form的不同在于，ajax是向服务器发送某些请求，ajax的使用大致概括为以下四点。
创建xml请求对象
建立事件模型（xml.onreadystatechange=function()）
设置（open）
发送（send）
ajax的特点是无需用户确认，就会自动执行(如果你将发送这一事件封装起来，也可以做到特定条件触发)
使用ajax最应注意的是，在open时设置的第三个参数，true，即异步 *** 作，这意味所有依赖于请求数据的 *** 作都应放在 onreadystatechange=function() 里，否则在数据请求未完成时去执行相关 *** 作会造成错误
3、使用cookie
cookie作为存储在用户计算机中的小型文本，可以用来存储少量数据。而php中提供了超级全局数组$_COOKIE['demo']用于访问cookiie，但这仅适用少量的数据交互
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）