通过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 相关文章推荐
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
js中less常用的方法小结
Aug 09 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 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中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
python 回调函数和回调方法的实现分析
2016/03/23 Python
python+django加载静态网页模板解析
2017/12/12 Python
python实现Decorator模式实例代码
2018/02/09 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
《郑和远航》教学反思
2014/04/16 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
医生见习报告范文
2014/11/03 职场文书
法定代表人证明书
2014/11/28 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书