通过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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
js异常捕获方法介绍
Apr 10 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
seajs下require书写约定实例分析
May 16 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
一个不错的仿携程自定义数据下拉选择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/08 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python连接SQLServer2000的方法详解
2017/04/19 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
Hammitt官网:设计师手袋
2020/05/23 全球购物
国际贸易毕业生求职信范文
2014/02/21 职场文书
学习两会精神心得范文
2014/03/17 职场文书
和解协议书
2014/04/16 职场文书
合伙经营协议书范本
2014/04/18 职场文书
法律进社区活动总结
2015/05/07 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python