JS来动态的修改url实现对url的增删查改


Posted in Javascript onSeptember 05, 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 相关文章推荐
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 Javascript
jQuery表格插件datatables用法总结
Sep 05 #Javascript
jQuery中index()的用法分析
Sep 05 #Javascript
使用jquery解析XML的方法
Sep 05 #Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 #Javascript
javascript获取dom的下一个节点方法
Sep 05 #Javascript
原生JavaScript生成GUID的实现示例
Sep 05 #Javascript
javascript动态控制服务器控件实例
Sep 05 #Javascript
You might like
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
python二叉树的实现实例
2013/11/21 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
python中web框架的自定义创建
2019/09/08 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
自荐信格式范文
2013/10/07 职场文书
给同学的道歉信
2014/01/16 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
暑期教师培训方案
2014/06/07 职场文书
求职意向书
2014/07/29 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python