通过JS来动态的修改url,实现对url的增删查改

 更新时间:2014年09月01日 09:18:51   投稿:hebedich  
本文主要介绍了通过JS来动态的修改url,实现对url的增删查改,把代码分享给大家,希望能有所帮助

虽然可以通过get方式提交post表单等方式来动态修改url,但如果多个按钮能并行提交时,写多个大体相同,又有些细节差异的表单,难免有些不妥,因此,想到了通过JS来动态的修改url,来实现对url的增删查改。

 <script>
 
 var LG=(function(lg){
   var objURL=function(url){
     this.ourl=url||window.location.href;
     this.href="";//?前面部分
     this.params={};//url参数对象
     this.jing="";//#及后面部分
     this.init();
   }
   //分析url,得到?前面存入this.href,参数解析为this.params对象,#号及后面存入this.jing
   objURL.prototype.init=function(){
     var str=this.ourl;
     var index=str.indexOf("#");
     if(index>0){
       this.jing=str.substr(index);
       str=str.substring(0,index);
     }
     index=str.indexOf("?");
     if(index>0){
       this.href=str.substring(0,index);
       str=str.substr(index+1);
       var parts=str.split("&");
       for(var i=0;i<parts.length;i++){
         var kv=parts[i].split("=");
         this.params[kv[0]]=kv[1];
       }
     }
     else{
       this.href=this.ourl;
       this.params={};
     }
   }
   //只是修改this.params
   objURL.prototype.set=function(key,val){
     this.params[key]=val;
   }
   //只是设置this.params
   objURL.prototype.remove=function(key){
     this.params[key]=undefined;
   }
   //根据三部分组成操作后的url
   objURL.prototype.url=function(){
     var strurl=this.href;
     var objps=[];//这里用数组组织,再做join操作
     for(var k in this.params){
       if(this.params[k]){
         objps.push(k+"="+this.params[k]);
       }
     }
     if(objps.length>0){
       strurl+="?"+objps.join("&");
     }
     if(this.jing.length>0){
       strurl+=this.jing;
     }
     return strurl;
   }
   //得到参数值
   objURL.prototype.get=function(key){
     return this.params[key];
   }  
   lg.URL=objURL;
   return lg;
 }(LG||{}));
 
     var myurl=new LG.URL(window.location.href);
     myurl.remove("b"); //删除了b
     alert(myurl.get ("a"));//取参数a的值,这里得到1
     myurl.set("a",23); //修改a的值为23
     alert (myurl.url());
 </script>

相关文章

  • JS实现的四叉树算法详解

    JS实现的四叉树算法详解

    这篇文章主要介绍了JS实现的四叉树算法,简单分析了四叉树的相关概念、原理、实现方法及操作注意事项,需要的朋友可以参考下
    2018-12-12
  • js 两个日期比较相差多少天的实例

    js 两个日期比较相差多少天的实例

    下面小编就为大家带来一篇js 两个日期比较相差多少天的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • js实现课堂随机点名系统

    js实现课堂随机点名系统

    这篇文章主要介绍了js实现课堂随机点名系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • js遍历对象数组并获取对象相应的属性值实例代码

    js遍历对象数组并获取对象相应的属性值实例代码

    对于数组或者对象的遍历,筛选,提取等操作是前端开发中经常有的需求,下面这篇文章主要给大家介绍了关于js遍历对象数组并获取对象相应的属性值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • JS和canvas实现俄罗斯方块

    JS和canvas实现俄罗斯方块

    本文主要介绍了JS和canvas实现俄罗斯方块的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript实现鼠标悬浮页面切换效果

    JavaScript实现鼠标悬浮页面切换效果

    这篇文章主要为大家详细介绍了JavaScript实现鼠标悬浮页面切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • List Information About the Binary Files Used by an Application

    List Information About the Binary Files Used by an Applicati

    List Information About the Binary Files Used by an Application...
    2007-06-06
  • javascipt:filter过滤介绍及使用

    javascipt:filter过滤介绍及使用

    filter是new一个新的array,这篇文章主要介绍了javascipt filter过滤介绍及使用,需要的朋友可以参考下
    2014-09-09
  • 纯CSS3代码实现滑动开关效果

    纯CSS3代码实现滑动开关效果

    CSS33D炫酷左右滑动开关按钮是一款非常酷的CSS3 3D开关按钮,点击按钮可以左右滑动,就像开关打开闭合一样的效果,通过本篇文章给大家介绍纯CSS3代码实现滑动开关效果,需要的朋友可以参考下
    2015-08-08
  • JavaScript的ES5实现继承的4种常用方法小结

    JavaScript的ES5实现继承的4种常用方法小结

    继承是面向对象软件技术当中的一个概念,这篇文章主要为大家详细介绍了JavaScript ES5实现继承的4种常用方法,感兴趣的小伙伴可以了解一下
    2024-03-03

最新评论