最近自己在忙着做毕业设计，后台程序员，前端菜鸡，因为需要，所以实现了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. ural1519插头DP

    1519. Formula 1 Time limit: 1.0 second Memory limit: 64 MB Background Regardless of the fact, that V ...

  2. UVA10537 Toll! Revisited

    difkstra + 路径输出 The Toll! Revisited Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & ...

  3. Ora创建job定时执行某存储过程

    --创建job任务,每天晚上8点执行存储过程:por_postrecords-- declare job number; begin sys.dbms_job.submit(job =>job, ...

  4. LeetCode之Max Points on a Line Total

    1.问题描述 Given n points on a 2D plane, find the maximum number of points that lie on the same straight ...

  5. leetcode第33题--Search for a Range

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  6. leetcode第11题--Container With Most Water

    Problem: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate ...

  7. 方向梯度直方图（HOG）和颜色直方图的一些比較

    近期在学习视频检索领域的镜头切割方面的知识,发现经常使用的方法是直方图的方法,所以才专门有时间来学习下.查看到这两种直方图的时候,感觉有点接近,好像又不同,放在这做个比較.大部分还是百科的内容,只是对 ...

  8. 网易ios 面试

    1 说说 你对  MRC和 ARC 的理解 2  对OC内存分析 有什么好的方法, 3 corePlot 4 pop 动画 5 cocoapods 6 GCD 7 瀑布流 及 uicollection ...

  9. wcf实例模型（随记）

    -----------------------------------------实例模型: 1.InstanceContentextMode: -------PerCall(单调):无状态,每次调用 ...

  10. sql材料分级统计及汇总案例参考

    --第一步:根据系统编号.列.单价分组求和 select CLBH,DJ,sum(SL) as SL,sum(JE) as JE,Lie into #TempSZCMX from #ShouZhiCu ...