zoukankan      html  css  js  c++  java
  • js处理url中的请求参数(编码/解码)

      在处理 a 链接跳转其他页面时,总会遇到需要传递一些当前页面的信息到其他页面,然后其他页面利用这些信息进行相关操作。利用 get 请求或 hash 传递是常见的方式。

      首先,需要对传递的参数进行编码,保证数据的安全性;之后,将参数拼接到要跳转的url后,并设置为 a 链接中的 href 属性值。

    var util = {
        setUrlParam: function (params, targetUrl) {
            var url = '';
            if(params && targetUrl){
                // json系列化为字符串,并编码
                var enRequestParams = encodeURIComponent(JSON.stringify(params));
                // get拼接
                url = targeteUrl + '?rq=' + enRequestParams;
                // 或hash拼接
                // targeteUrl = targeteUrl + '#rq=' + enRequestParams;
            }
            return url;
        }
    }
    // 假设需要传递的数据如下
    var requestParams = {
        'id': '1001',
        'time': '2017-04-21'
    };
    // 要跳转的页面url
    var targeteUrl = 'http://www.baidu.com';
    
    // 获取html中id=target的a链接,并设置href
    var ndTargetLink = document.querySelector('a#target');
    ndTargetLink.href = util.setUrlParam(requestParams, targeteUrl);

      完成了地址拼接,接下来就是在目标页面中解析请求参数了。

    var util = { 
        // 获取参数
        getUrlParam:function(url, param) {
          var reg = new RegExp(param + "=([^&]*)(&|$)");
          var num = url.match(reg);
          if (num != null)
            return num[1];
          return null;
        },
        // 解码,try处理多次编码的情况
        decodeUrl:function(str){
            str=decodeURIComponent(str);
            var json=null;
            try{
                json=JSON.parse(str);
                return json;
            }catch(e){
                return  util.decodeUrl(str);
            }
        }
    }
    var loadPage = {
        data:(function(){
           var json=util.decodeUrl(util.getUrlParam(hash,'rq')); 
           return json;
        })()
    }
    var data = loadPage.data; 
    console.log('data',data);

     

  • 相关阅读:
    PHP开发调试环境配置(基于wampserver+Eclipse for PHP Developers )
    关于汽车
    PCB 敷铜间距规则(转)
    有同感的话
    kubernetes学习之二进制部署1.16
    kubernetes网络之Flannel
    Kubernetes学习之原理
    Kubernetes学习之基础概念
    Centos7配置Grafana对接OpenLDAP
    Centos7安装OpenLDAP
  • 原文地址:https://www.cnblogs.com/EnSnail/p/6744869.html
Copyright © 2011-2022 走看看