方法一：
下面是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) continue
if(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
一.通过表单简单的传输数据，利用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
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）