代码改变世界

静态页传递参数Demo

2010-11-03 11:12  ☆冷枫☆  阅读(787)  评论(0)    收藏  举报

     在动态页中传递参数比较常见，静态页中就比较少见了。通常，我们需要在两静态页间传递参数是通过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>

 

   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字符串
 * 参数: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>

 

   到这一步，静态页间的参数传递工作也就完成了。url传参这种方式相对于cookie优越性主要体现在"取值方便.可以跨域",但同时这种方式同于Get，因此，传递值的长度大小也是有所限制的。