在动态页中传递参数比较常见,静态页中就比较少见了。通常,我们需要在两静态页间传递参数是通过Cookie的方式处理的,Cookie是浏览器存储少量命名数据,存于客户端,使用这种方式在跨域方面有所限制。这里主要简要讲述一下通过Url方式传参。
1.新建一个Request.html页面,用于发送请求传递参数给另外页面,页面示例如下:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title ></ title >
< script language ="javascript" type ="text/javascript" >
function SendRequest()
{
// 传递单个值 read.html?username=beyond;
// 传递多全值 read.html?username=beyond&sex=man;
url = " GetRequest.html?name= " + escape(document.all.name.value);
url += " &type= " + escape(document.all.type.value);
location.href = url;
}
</ script >
</ head >
< body >
< input type ="text" name ="name" >
< input type ="text" name ="type" >
< input type ="button" onclick ="SendRequest()" value ="SendRequest" >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title ></ title >
< script language ="javascript" type ="text/javascript" >
function SendRequest()
{
// 传递单个值 read.html?username=beyond;
// 传递多全值 read.html?username=beyond&sex=man;
url = " GetRequest.html?name= " + escape(document.all.name.value);
url += " &type= " + escape(document.all.type.value);
location.href = url;
}
</ script >
</ head >
< body >
< input type ="text" name ="name" >
< input type ="text" name ="type" >
< input type ="button" onclick ="SendRequest()" value ="SendRequest" >
</ body >
</ html >
2.建GetRequest.html页面,响应请求,获取对参数进行相关处理
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 处理请求页 </ title >
< script language ="javascript" >
/*
*--------------- GetRequest.html -----------------
* Request[key]
* 功能:实现html中取得URL字符串
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 处理请求页 </ title >
< script language ="javascript" >
/*
*--------------- GetRequest.html -----------------
* Request[key]
* 功能:实现html中取得URL字符串
* 参数:key,字符串.
* update:2004-6-11 10:30
*--------------- GetRequest.html -----------------
demo地址:http://localhost:6627/ProTest/GetRequest.html?username=a&sex=b */
var url = location.search; // 获取url地址中参数部分(包含问号即 ?username=a&sex=b)
var Request = new Object();
if (url.indexOf( " ? " ) !=- 1 ) // 如果地址中传递有参数进行相关操作
{
var str = url.substr( 1 ) // 去掉?号
strs = str.split( " & " ); // 得到username=a,sex=b
for ( var i = 0 ;i < strs.length;i ++ )
{
Request[strs[i].split( " = " )[ 0 ]] = unescape(strs[i].split( " = " )[ 1 ]);
}
}
alert(Request[ " name " ])
alert(Request[ " type " ])
</ script >
</ head >
< body >
</ body >
</ html >
* update:2004-6-11 10:30
*--------------- GetRequest.html -----------------
demo地址:http://localhost:6627/ProTest/GetRequest.html?username=a&sex=b */
var url = location.search; // 获取url地址中参数部分(包含问号即 ?username=a&sex=b)
var Request = new Object();
if (url.indexOf( " ? " ) !=- 1 ) // 如果地址中传递有参数进行相关操作
{
var str = url.substr( 1 ) // 去掉?号
strs = str.split( " & " ); // 得到username=a,sex=b
for ( var i = 0 ;i < strs.length;i ++ )
{
Request[strs[i].split( " = " )[ 0 ]] = unescape(strs[i].split( " = " )[ 1 ]);
}
}
alert(Request[ " name " ])
alert(Request[ " type " ])
</ script >
</ head >
< body >
</ body >
</ html >
到这一步,静态页间的参数传递工作也就完成了。url传参这种方式相对于cookie优越性主要体现在"取值方便.可以跨域",但同时这种方式同于Get,因此,传递值的长度大小也是有所限制的。