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

时间:2023-03-09 00:02:27
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-

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