最近自己在忙着做毕业设计，后台程序员，前端菜鸡，因为需要，所以实现了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. 来选择一款适合你网站的CMS建站程序吧

    1:首页我们要搞清楚什么叫cms? ContentManagementSystem就是cms的全名,意思就是内容管理系统.cms整站系统是以文章系统为核心,增加用户需要的模块,如文章.图片.下载等,提 ...

  2. jekyll bootstrap搭建github blog

    前提你必须有一个GitHub账号且本机安装有Git 一.创建一个新的仓库 去你的https://github.com主页新建一个仓库 名字为USERNAME.github.com USERNAME为你 ...

  3. webBrowser 参数设置

    //禁用脚本错误等类似的窗口信息 this.webBrowser1.ScriptErrorsSuppressed = true; //禁用右键菜单 this.webBrowser1.IsWebBrow ...

  4. MVC5系列——布局视图

    MVC5系列——布局视图 目录 系列文章 概述 布局视图 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加 ...

  5. shell 水平测试

    http://bbs.chinaunix.net/thread-476260-1-1.html 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  6. css3动画实例测试

    1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...

  7. Varnish 4.0

    Varnish 4.0 实战   简介 Varnish 是一款高性能且开源的反向代理服务器和 HTTP 加速器,其采用全新的软件体系机构,和现在的硬件体系紧密配合,与传统的 squid 相比,varn ...

  8. 【转载】matlab如何判断一个点是否在多面体内

    转载自:http://www.52souji.net/point-within-a-polyhedron/ 我遇到的一个实际问题是:要在空位区域随机放置一定数量的原子,这些原子在空位区域任何一处存在的 ...

  9. 利用Matlab生成一个网格化的三维三轴椭球面（生成直角坐标）

    代码很简单,a,b,c分别为椭球的三轴轴长,a=b=c时得到的是三维球面,a=b!=c时得到的是三维椭球面,a!=b且a!=c且b!=c时得到的是三维旋转椭球面 %生成一个笛卡尔坐标系下三轴椭球表面的 ...

  10. 开源框架Caliburn.Micro

    Caliburn.Micro学习笔记----引导类和命名匹配规则   用了几天时间看了一下开源框架Caliburn.Micro 这是他源码的地址http://caliburnmicro.codeple ...