一.通过表单简单的传输数据，利用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/103739371html静态页面间传值有以下三种方法：方法一：下面是javascrīpt的一种实现方法, 这个函数是通过window.location.href中的分割符获得各个参数。 有了这个函数，就可以在页面之间传递参数了。 /* *函数功能：从href获得参数 *sHref: http://www.artfh.com/arg.htm?arg1=d&arg2=re *sArgName:arg1, arg2 *return: the value of arg. d, re */ function GetArgsFromHref(sHref, sArgName) { var args = sHref.split("?")var retval = ""if(args[0] == sHref) /*参数为空*/ { return retval/*无需做任何处理*/ } var str = args[1]args = str.split("&")for(var i = 0i <args.lengthi ++) { str = args[i]var arg = str.split("=")if(arg.length <= 1) continueif(arg[0] == sArgName) retval = arg[1]} return retval} 方法二： html地址传递参数进行其他事情. <scrīpt>/* 用途: 接收地直栏参数 取id=1 根据ID的值 */ urlinfo=window.location.href//获取当前页面的url len=urlinfo.length//获取url的长度 offset=urlinfo.indexOf("?")//设置参数字符串开始的位置 newsidinfo=urlinfo.substr(offset,len)//取出参数字符串 这里会获得类似“id=1”这样的字符串 newsids=newsidinfo.split("=")//对获得的参数字符串按照“=”进行分割 newsid=newsids[1]//得到参数值 newsname=newsids[0]//得到参数名字 </scrīpt>方法三：做中英转换的时候，要准确的获取参数并取出，所以做了一个简单的html中用js获取当取地址栏的一个Object。里面有三个方法： 1、request.QueryString("参数")//获取指定参数，返回字符串2、request.QueryStrings()//获取全部参数，并返回数组3、 request.setQuery("参数","参数的值")//如果当前地址栏有此参数，那么将更新此参数，否则返回一个新的地址栏参数字符串。例如：当前地址栏参数字符串为：?name=a&site=never_online alert(request.setQuery("name","blueDestiny")) 如果地址栏参数中有"name"，那么返回?name=blueDestiny&site=never_online setQuery 方法有自动追加参数的功能。如：当前地址栏参数字符串为：?site=never_online alert(request.setQuery("name","blueDestiny")) 则返回?site=never_online&name=blueDestiny 同理，如果地址栏没有参数，也会自动追加参数 alert(request.setQuery("name","blueDestiny")) 返回?name=blueDestiny
在跳转后传递值，然后新页面获取值，根据值去添加案例的 class ，使对应的案例标题颜色改变
首先，父页面中 button 跳转采用
button 绑定 value 值
子页面中获取 vlaue 的值
因为我这边涉及多个，如果使用同一个 id 不能获取 vlaue 值，所以我在页面上写了一个空的按钮用来存储所点击的 vlaue 值
当点击 button 时， 把当前 button 的 vlaue 值赋值为** id="btn-case" ** 的 vlaue 值
然后在子页面中就可以通过去获取** id="btn-case"** 的** vlaue 值，来设置跳转后的默认显示，选项比较可以采用 switch case** 语句
注意 ：这里的 a ** 使用 alert（typeof(a)）**d出 String ，使用 switch case 语句时需要转换为 number 值，或者 **case **值设置为 ‘1’，添加引号。
跳转页面时把参数写入Url后的参数中，这种方法对与a标签跳转很方便，后面价格参数即可，下面来看看页面中怎么去应用
对于上面的案例可以直接在html上把参数带上，在打开的页面中获取。
如果对于input框输入，或者其他需要传入的值
微信扫一扫
支付宝扫一扫
评论列表（0条）