通过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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
Vue-Router的使用方法
Sep 05 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
一个不错的仿携程自定义数据下拉选择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/06/30 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
jquery动态改变div宽度和高度
2015/02/09 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python简明入门教程
2015/08/04 Python
python:print格式化输出到文件的实例
2018/05/14 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
详解python内置模块urllib
2020/09/09 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
幼儿教师个人求职信范文
2013/09/21 职场文书
信息技术培训感言
2014/03/06 职场文书
优质服务演讲稿
2014/05/14 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
《花钟》教学反思
2016/02/17 职场文书
教师个人教学反思
2016/02/23 职场文书
自荐信范文
2019/05/20 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
Java死锁的排查
2022/05/11 Java/Android