最近自己在忙着做毕业设计，后台程序员，前端菜鸡，因为需要，所以实现了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页面之间参数传递（单一参数、对象参数传递）的更多相关文章

  1. js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值

    js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值本文介绍jquery/js获取当前页面url地址的方法,在jquery与js中获取当前页面url方法是一样的,因为jque ...

  2. Vue:不同页面之间的传递参数--params

    在嵌套vue-router情况下,不同页面之间传递参数可以通过params实现.而params传参分为两种情况: 1.参数在url中显示 首先你要确定自己要传的参数,并在控制路由的文件中的Router ...

  3. jsp页面之间传中文参数显示乱码问题的解决

    最近在项目中遇到jsp页面通过url传递参数,出现乱码,但是在本地是正常显示,在服务器上却是乱码,找了好久都没找到解决方法,最终在大神的帮助下解决了这个问题 比如从a.jsp像b.jsp页面传递参数 ...

  4. js实现两个页面之间跳转参数传递

    html在设计时,规定跳转地址后加"?"表示从此开始为跟随页面地址跳转的参数. 有时候,我们希望获得相应的跳转前页面里的内容,这时候我们就可以考虑将内容以参数形式放到地址中传过来, ...

  5. js(jquery)代码在页面上实时地显示时间

    一.引入jquery 二.HTML代码 三.js代码 1)引入js代码 2)下面是完整的js代码

  6. JS jQuery 点击页面漂浮出文字

    看到有些网站点击页面任意地方都会弹出文字出来 感觉很炫酷 但其实实现方法很简单 哇哈哈哈~~~ // 调用 ( e, 消失毫秒, 数组, 向上漂浮距离) $(document).click(funct ...

  7. js两个页面之间URL传递参数中文乱码

  8. JS jQuery 点击页面弹出文字

    <style> .animate{ animation:myfirst 3s; -moz-user-select:none;/*火狐*/ -webkit-user-select:none; ...

  9. C#中web页面之间传递数组参数

    一直以来用到的都是在url地址中传递string类型,那么如果是数组类型的该怎么传递呢? ]; arryStr[] = "a"; arryStr[] = "b" ...

随机推荐

  1. 利用docker搭建yii2 详细步骤

    定位镜像 在hub.docker.com 搜索yii2,并且最后定位到 https://hub.docker.com/r/codemix/yii2-base/codemix/yii2-base 然后在 ...

  2. 快速构建Windows 8风格应用32-构建辅助磁贴

    原文:快速构建Windows 8风格应用32-构建辅助磁贴 引言 Windows Phone中,我们开发者可能会开发的一个功能点是将数据列表中某一项"Pin To Start(固定到开始屏幕 ...

  3. PO Box简介

    使用Erlang写程序的时候,经常会碰到一种情况:因为Erlang进程的mailbox是没有大小限制的,所以它会一直接受消息,直到Erlang节点内存溢出.在大多数情况下,我们可以通过限制消息生产者的 ...

  4. Visual Studio 2010 单元测试之一---普通单元测试

    原文:Visual Studio 2010 单元测试之一---普通单元测试 本文以Visual Studio 2010为例,来介绍如何在Visual Studio里面进行单元测试. 首先来介绍普通单元 ...

  5. 增加 Java 有几个好习惯表现

    以下是一些参考网络资源中的摘要Java编程在一些地方尽可能做. 1. 尝试使用单个例如在合适的场合 使用单例可以减轻负荷的负担,缩短加载时间.提高装载效率,但并不是所有的地方都适合一个案例.简单的说, ...

  6. solr中重跑索引

    solr与.net系列课程(八)solr中重跑索引的注意事项   solr与.net系列课程(八)solr中重跑索引的注意事项 我们如果在项目中使用solr,那肯定就是把数据库中的数据跑进solr服务 ...

  7. EF codefirst+mvc4+bootstrap+autofac+ddd 系统共享 祝大家新年开心搬砖

    博客园的博友新年好,小弟在此给大伙拜了晚年,感谢一直以来的支持. 在过去的一年,从博客园有400多ASP.NET MVC爱好者加入本人的群,本人在此很感激,并勉励大家一起学习奋斗. 希望在新的一年,继 ...

  8. {{angular.js 使用技巧}} - 实现计算列属性

    前端MV*框架现在有很多,其中某些框架有计算列(又叫监控属性),比如:微软推荐的 Knockout.js 和博客园司徒正美的 avalon.js 框架. 本人只使用过 Knockout.js,aval ...

  9. 泛型Hub

    SignalR循序渐进(二)泛型Hub 接上一篇,文章末尾抛出了2个问题: 能不能让客户端声明一个强类型的方法列表呢?这样首先不容易写错. 同样的,能不能让服务端声明一个强类型的方法列表给客户端调用呢 ...

  10. Android开发方法学

    这是Cyril Mottier最近更新的一篇文章,原谅地址在这里:Android开发方法学. 这篇文章是他介绍自己所在项目小组(Capitaine Train Android Team)设计.开发时的 ...