通过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 相关文章推荐
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
mailto的使用技巧分享
Dec 21 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
node后端服务保活的实现
Nov 10 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 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利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
python fabric实现远程部署
2017/01/05 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
django 实现简单的插入视频
2020/04/07 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
python 决策树算法的实现
2020/10/09 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
幼儿园新年寄语
2014/04/03 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android