zoukankan      html  css  js  c++  java
  • js jquery 实现html页面之间参数传递(单一参数、对象参数传递)

    最近自己在忙着做毕业设计,后台程序员,前端菜鸡,因为需要,所以实现了html页面之间参数传递。------jstarseven 、菜鸡的自我修养.

    页面A代码如下:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>html页面参数传递</title>
     6 </head>
     7 <body>
     8     页面A
     9 <input id="btn-a" type="button" value="跳转B页面"/>
    10 <script type="text/javascript" src="jquery-1.11.2.js"></script>
    11 </body>
    12 <script>
    13 
    14 $(document).ready(function(){
    15 
    16     var obj={
    17         id:1,
    18         name:"张三",
    19         age:10
    20     };
    21     alert("A页面参数:"+parseParam(obj));
    22     $("#btn-a").click(function(){
    23         window.location.href="domoB.html?"+parseParam(obj);
    24     });
    25     
    26 });
    27 
    28 
    29 
    30 // 将js对象转成url jquery实现
    31 var parseParam=function(paramObj, key){
    32   var paramStr="";
    33   if(paramObj instanceof String||paramObj instanceof Number||paramObj instanceof Boolean){
    34     paramStr+="&"+key+"="+encodeURIComponent(paramObj);
    35   }else{
    36     $.each(paramObj,function(i){
    37       var k=key==null?i:key+(paramObj instanceof Array?"["+i+"]":"."+i);
    38       paramStr+='&'+parseParam(this, k);
    39     });
    40   }
    41   return paramStr.substr(1);
    42 };
    43 
    44 
    45 /**
    46  * paramObj 将要转为URL参数字符串的对象
    47  * key URL参数字符串的前缀
    48  * encode true/false 是否进行URL编码,默认为true
    49  * js实现
    50  * return URL参数字符串
    51  */
    52 var urlEncode = function (paramObj, key, encode) {
    53   if(paramObj==null) return '';
    54   var paramStr = '';
    55   var t = typeof (paramObj);
    56   if (t == 'string' || t == 'number' || t == 'boolean') {
    57     paramStr += '&' + key + '=' + ((encode==null||encode) ? encodeURIComponent(paramObj) : paramObj);
    58   } else {
    59     for (var i in paramObj) {
    60       var k = key == null ? i : key + (paramObj instanceof Array ? '[' + i + ']' : '.' + i);
    61       paramStr += urlEncode(paramObj[i], k, encode);
    62     }
    63   }
    64   return paramStr;
    65 };
    66 
    67 
    68 </script>
    69 </html>
    View Code

    转载请标明原文地址:http://www.cnblogs.com/jstarseven/p/5537333.html

    页面B代码如下:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>html页面参数传递</title>
     6 </head>
     7 <body>
     8     页面B
     9 <script type="text/javascript" src="jquery-1.11.2.js"></script>
    10 </body>
    11 <script>
    12 
    13 $(document).ready(function(){
    14     var obj=GetRequest();
    15     alert(obj.id+"--"+obj.name+"--"+obj.age);
    16 });
    17 
    18 
    19 
    20 //根据参数名称获取url参数
    21 function getUrlParamValue(name) {
    22     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    23     var r = window.location.search.substr(1).match(reg);
    24     if (r != null) return decodeURIComponent(r[2]);
    25     return null;
    26 }
    27 
    28 //获取url参数封装成对象
    29 function GetRequest() {
    30   
    31   var url = location.search; //获取url中"?"符后的字串
    32    var theRequest = new Object();
    33    if (url.indexOf("?") != -1) {
    34       var str = url.substr(1);
    35       strs = str.split("&");
    36       for(var i = 0; i < strs.length; i ++) {
    37          theRequest[strs[i].split("=")[0]]=decodeURIComponent((strs[i].split("=")[1]));
    38       }
    39    }
    40    return theRequest;
    41 }
    42 
    43 
    44 </script>
    45 </html>
    View Code

    首先打开页面A,显示会传递的数据参数,点击跳转按钮---》B页面显示B页面获取的参数值。

      


     -END-

  • 相关阅读:
    【Spring】IOC核心源码学习(二):容器初始化过程
    啃啃老菜:Spring IOC核心源码学习(一)
    快速理解Kafka分布式消息队列框架
    浅谈分布式缓存那些事儿
    JVM调优总结
    唉,程序员要是自学能力不行就等死吧!
    游戏开发入门
    JVM源码分析-Java运行
    Java阻塞队列的实现
    Java中堆内存和栈内存详解
  • 原文地址:https://www.cnblogs.com/jstarseven/p/5537333.html
Copyright © 2011-2022 走看看