标签：
最近自己在忙着做毕业设计，后台程序员，前端菜鸡，因为需要，所以实现了html页面之间参数传递。------jstarseven 、菜鸡的自我修养.
页面A代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>html页面参数传递</title> 6 </head> 7 <body> 8 页面A 9 <input id="btn-a" type="button" value="跳转B页面"/> 10 <script type="text/javascript" src="jquery-1.11.2.js"></script> 11 </body> 12 <script> 13 14 $(document).ready(function(){ 15 16 var obj={ 17 id:1, 18 name:"张三", 19 age:10 20 }; 21 alert("A页面参数："+parseParam(obj)); 22 $("#btn-a").click(function(){ 23 window.location.href="domoB.html?"+parseParam(obj); 24 }); 25 26 }); 27 28 29 30 // 将js对象转成url jquery实现 31 var parseParam=function(paramObj, key){ 32 var paramStr=""; 33 if(paramObj instanceof String||paramObj instanceof Number||paramObj instanceof Boolean){ 34 paramStr+="&"+key+"="+encodeURIComponent(paramObj); 35 }else{ 36 $.each(paramObj,function(i){ 37 var k=key==null?i:key+(paramObj instanceof Array?"["+i+"]":"."+i); 38 paramStr+=‘&‘+parseParam(this, k); 39 }); 40 } 41 return paramStr.substr(1); 42 }; 43 44 45 /** 46 * paramObj 将要转为URL参数字符串的对象 47 * key URL参数字符串的前缀 48 * encode true/false 是否进行URL编码,默认为true 49 * js实现 50 * return URL参数字符串 51 */ 52 var urlEncode = function (paramObj, key, encode) { 53 if(paramObj==null) return ‘‘; 54 var paramStr = ‘‘; 55 var t = typeof (paramObj); 56 if (t == ‘string‘ || t == ‘number‘ || t == ‘boolean‘) { 57 paramStr += ‘&‘ + key + ‘=‘ + ((encode==null||encode) ? encodeURIComponent(paramObj) : paramObj); 58 } else { 59 for (var i in paramObj) { 60 var k = key == null ? i : key + (paramObj instanceof Array ? ‘[‘ + i + ‘]‘ : ‘.‘ + i); 61 paramStr += urlEncode(paramObj[i], k, encode); 62 } 63 } 64 return paramStr; 65 }; 66 67 68 </script> 69 </html>
页面B代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>html页面参数传递</title> 6 </head> 7 <body> 8 页面B 9 <script type="text/javascript" src="jquery-1.11.2.js"></script> 10 </body> 11 <script> 12 13 $(document).ready(function(){ 14 var obj=GetRequest(); 15 alert(obj.id+"--"+obj.name+"--"+obj.age); 16 }); 17 18 19 20 //根据参数名称获取url参数 21 function getUrlParamValue(name) { 22 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 23 var r = window.location.search.substr(1).match(reg); 24 if (r != null) return decodeURIComponent(r[2]); 25 return null; 26 } 27 28 //获取url参数封装成对象 29 function GetRequest() { 30 31 var url = location.search; //获取url中"?"符后的字串 32 var theRequest = new Object(); 33 if (url.indexOf("?") != -1) { 34 var str = url.substr(1); 35 strs = str.split("&"); 36 for(var i = 0; i < strs.length; i ++) { 37 theRequest[strs[i].split("=")[0]]=decodeURIComponent((strs[i].split("=")[1])); 38 } 39 } 40 return theRequest; 41 } 42 43 44 </script> 45 </html>
首先打开页面A，显示会传递的数据参数，点击跳转按钮---》B页面显示B页面获取的参数值。
js jquery 实现html页面之间参数传递（单一参数、对象参数传递）
标签：
原文地址：http://www.cnblogs.com/jstarseven/p/5537333.html
