最近自己在忙着做毕业设计，后台程序员，前端菜鸡，因为需要，所以实现了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. libvlc media player in C# (part 1)

    原文 http://www.helyar.net/2009/libvlc-media-player-in-c/ There seems to be a massive misconception ab ...

  2. GIMP也疯狂之动态图的制作（三）

    Note:本篇文章内容为linux下利用gimp和其它工具组合完成截取制作GIF图的一种实现,制作更为灵活,但并不方便,如果不需要那么高的定制性,并追求方便高效.可以使用类似QQ影音之类的软件,自带截 ...

  3. JS 禁止右键,禁止复制,禁止粘贴

    原文:JS 禁止右键,禁止复制,禁止粘贴 如何用用javascript 禁止右键,禁止复制,禁止粘贴,做站时常会用到这些代码,所以收藏了一下!1. oncontextmenu="window ...

  4. jQuery小例

    jQuery小例子 使用前,请先引用jquery 1,map遍历数组   2,jQuery对象与DOM对象才做元素和互转 3,prevall与nextall 4,jquery版的星星评分控件 5,jq ...

  5. NHibernate 数据查询之QueryOver<T>

    NHibernate 数据查询之QueryOver<T>   一.限制运算符 Where:筛选序列中的项目WhereNot:反筛选序列中的项目 二.投影运算符 Select:创建部分序列的 ...

  6. J2EE总结（2）——Servlet/JSP

    Servlet/JSP Servlet定义:部署在java的Webserver上的组件.整个java服务端程序都构建在Servlet之上,以多线程方式提 供服务,具有效率高.可扩展,可移植的特点. J ...

  7. 【转】webAPP快速入门

    WebApp与Native App有何区别呢? Native App: 1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C. 2.更新体验较差.同时也比较麻烦.每一次发布 ...

  8. 动态操作表格行(兼容IE、火狐)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. SD卡添加文件，添加不进去,报 Read-only file system错误

    android 模拟器手机如何添加文件到sd卡? 在DDMS中直接添加文件到模拟器sd卡如果出现错误类似:Failed to push XXXXX.txt on emulator- : Read-on ...

  10. ESB 设计

    ESB 设计 最近为公司完成了一个 ESB 的设计.下面简要说明一下具体的设计方案. 企业 SOA 整体方案 在前一篇<SOA.ESB.NServiceBus.云计算 总结>中说到,SOA ...