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 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
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笔试题
2009/08/04 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
JS前端加密算法示例
2016/12/22 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
Python中apply函数的用法实例教程
2014/07/31 Python
Python中的super()方法使用简介
2015/08/14 Python
python将回车作为输入内容的实例
2018/06/23 Python
使用python远程操作linux过程解析
2019/12/04 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
应用服务器有那些
2012/01/19 面试题
幼儿教师师德承诺书
2014/05/23 职场文书
会计简历自我评价
2015/03/10 职场文书
老乡聚会通知
2015/04/23 职场文书
地道战观后感300字
2015/06/04 职场文书
烈士陵园观后感
2015/06/08 职场文书
小学英语课教学反思
2016/02/15 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
vue里使用create, mounted调用方法
2022/04/26 Vue.js