最近自己在忙着做毕业设计，后台程序员，前端菜鸡，因为需要，所以实现了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. PL/SQL个人学习笔记（二）

    IF条件 declare cursor s is            select version from city_server t;   s_ city_server.version%type ...

  2. POJ 3380 最大流

    Paratroopers Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit ...

  3. Mysql之IN 和 Exists 用法

    1.基本用法 IN:后面的子查询 是返回结果集的,换句话说执行次序和Exists()不一样.子查询先产生结果集,然后主查询再去结果集里去找符合要求的字段列表去.符合要求的输出,反之则不输出. Exis ...

  4. SQLServer通过链接服务器远程删除数据性能问题解决

    原文:SQLServer通过链接服务器远程删除数据性能问题解决 在上一遍文章中介绍了SQLServer通过链接服务器访问Oracle性能问题的解决方法,本文介绍链接服务器下远程删除SQLServer数 ...

  5. 基于C# 语言的两个html解析器

    基于C# 语言的两个html解析器 1)Html Agility Pack http://nsoup.codeplex.com/ 代码段示例: HtmlDocument doc = new HtmlD ...

  6. linux下搭建SVN服务器完全手册-很强大！！！！！

    系统环境        RHEL5.4最小化安装(关iptables,关selinux) + ssh + yum 一,安装必须的软件包.        yum install subversion ( ...

  7. 【转】android 欢迎界面翻页成效，仿微信第一次登陆介绍翻页界面

    android 欢迎界面翻页效果,仿微信第一次登陆介绍翻页界面 本实例做的相对比较简单主要是对翻页控件的使用,有时候想要做一些功能是主要是先了解下是否有现成的控件可以使用,做起来比较简单不用费太大的劲 ...

  8. QTP特点有哪些？

    QTP特点有哪些? 浏览:77 | 更新:2013-06-19 12:35 QTP是一个侧重于功能的回归自动化测试工具:提供了很多插件,如:.NET的,Java的,SAP的,Terminal Emul ...

  9. 如何使ActionBar不那么单调

    此时我没有生产博客,此时我只是优秀博客的搬运工! 博客原址,有兴趣的可以查看一下. 详情如下: 使ActionBar不那么单调 回到2013年5月份,每一个人都发觉了Play Music中Action ...

  10. Qt的SQL操作，DELETE，SELECT

    #include <QObject> #include <QSqlDatabase> #include <QSqlError> #include <QSqlQ ...