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

html-css010

两个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)123456789101112131415161718注意这种方式传递中文数据需要用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>123456789101112131415161718192021222324252627282930313233343536b.html<html><head> <meta charset="UTF-8"> <title>b</title> <script type="text/javascript"> /*** *读取指定的Cookie值 *@param {string} cookieName Cookie名称 */function ReadCookie(cookie_name){//判断是否存在cookieif (document.cookie.length >0){//查询cookie开始部分cookie_start = document.cookie.indexOf(cookie_name + "=")//如果存在if (cookie_start != -1){//计算结束部分cookie_start = cookie_start + cookie_name.length + 1cookie_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>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950此种方法也是适合自己平时写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与服务器的交互常见有以下几种，这里以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，但这仅适用少量的数据交互

简单点说，就是前端技术与后端技术沟通，根据业务定义交互接口，交互接口的的形式可能包含：

1、后端将数据输出到HTML页面，在JS控制逻辑中需要访问数据时可以从HTML中取得。

2、定义前后端请求的接口，一般是AJAX接口，如果存在跨域问题或一些特殊的业务场景，可能也会使用JSONP或者其他方式，总之，不论是何种方式请求，目的都是动态的请求数据，然后根据返回数据刷新页面内容。返回数据的格式现在主流是使用JSON格式，但是也不排除一些特殊的业务场景需要是使用XML或其他格式的数据。