js jquery 实现html页面之间参数传递（单一参数、对象参数传递）

最近自己在忙着做毕业设计，后台程序员，前端菜鸡，因为需要，所以实现了html页面之间参数传递。------jstarseven 、菜鸡的自我修养.

页面A代码如下：

 <!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>html页面参数传递</title>
 </head>
 <body>
     页面A
 <input id="btn-a" type="button" value="跳转B页面"/>
 <script type="text/javascript" src="jquery-1.11.2.js"></script>
 </body>
 <script>

 $(document).ready(function(){

     var obj={
         id:1,
         name:"张三",
         age:10
     };
     alert("A页面参数："+parseParam(obj));
     $("#btn-a").click(function(){
         window.location.href="domoB.html?"+parseParam(obj);
     });

 });

 // 将js对象转成url jquery实现
 var parseParam=function(paramObj, key){
   var paramStr="";
   if(paramObj instanceof String||paramObj instanceof Number||paramObj instanceof Boolean){
     paramStr+="&"+key+"="+encodeURIComponent(paramObj);
   }else{
     $.each(paramObj,function(i){
       var k=key==null?i:key+(paramObj instanceof Array?"["+i+"]":"."+i);
       paramStr+='&'+parseParam(this, k);
     });
   }
   return paramStr.substr(1);
 };

 /**
  * paramObj 将要转为URL参数字符串的对象
  * key URL参数字符串的前缀
  * encode true/false 是否进行URL编码,默认为true
  * js实现
  * return URL参数字符串
  */
 var urlEncode = function (paramObj, key, encode) {
   if(paramObj==null) return '';
   var paramStr = '';
   var t = typeof (paramObj);
   if (t == 'string' || t == 'number' || t == 'boolean') {
     paramStr += '&' + key + '=' + ((encode==null||encode) ? encodeURIComponent(paramObj) : paramObj);
   } else {
     for (var i in paramObj) {
       var k = key == null ? i : key + (paramObj instanceof Array ? '[' + i + ']' : '.' + i);
       paramStr += urlEncode(paramObj[i], k, encode);
     }
   }
   return paramStr;
 };

 </script>
 </html>

转载请标明原文地址：http://www.cnblogs.com/jstarseven/p/5537333.html

页面B代码如下：

 <!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>html页面参数传递</title>
 </head>
 <body>
     页面B
 <script type="text/javascript" src="jquery-1.11.2.js"></script>
 </body>
 <script>

 $(document).ready(function(){
     var obj=GetRequest();
     alert(obj.id+"--"+obj.name+"--"+obj.age);
 });

 //根据参数名称获取url参数
 function getUrlParamValue(name) {
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
     var r = window.location.search.substr(1).match(reg);
     if (r != null) return decodeURIComponent(r[2]);
     return null;
 }

 //获取url参数封装成对象
 function GetRequest() {

   var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
       var str = url.substr(1);
       strs = str.split("&");
       for(var i = 0; i < strs.length; i ++) {
          theRequest[strs[i].split("=")[0]]=decodeURIComponent((strs[i].split("=")[1]));
       }
    }
    return theRequest;
 }

 </script>
 </html>

首先打开页面A，显示会传递的数据参数，点击跳转按钮---》B页面显示B页面获取的参数值。

---

-END-