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


Posted in Javascript onSeptember 01, 2014

虽然可以通过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>
Javascript 相关文章推荐
jQuery 版元素拖拽原型代码
Apr 25 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
vue实现数字滚动效果
Jun 29 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 #Javascript
原生javascript实现拖动元素示例代码
Sep 01 #Javascript
使用text方法获取Html元素文本信息示例
Sep 01 #Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 #Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 #Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 #Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 #Javascript
You might like
PHP 截取字符串专题集合
2010/08/19 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
python encode和decode的妙用
2009/09/02 Python
Python实现翻转数组功能示例
2018/01/12 Python
Flask-Mail用法实例分析
2018/07/21 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
python 监控logcat关键字功能
2020/09/04 Python
如何理解transaction事务的概念
2015/05/27 面试题
医院护士的求职信范文
2013/12/26 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
甘南现象心得体会
2014/09/11 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
酒会邀请函
2015/01/31 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
PyTorch中的torch.cat简单介绍
2022/03/17 Python