通过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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
vue源码nextTick使用及原理解析
Aug 13 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一些有意思的小区别
2006/12/06 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
酒店副总岗位职责
2013/12/24 职场文书
业绩考核岗位职责
2014/02/01 职场文书
岗位竞聘书范文
2014/03/31 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
会议开幕词
2015/01/28 职场文书
2015年网管个人工作总结
2015/05/22 职场文书