JS实现URL参数添加删除功能
JS实现URL参数添加删除功能，在线演示。HTML使用范例：
<html>
<head>
<scriptsrc="jquery-3.0.0.min.js"></script>
<scriptsrc="url-param.js"></script>
</head>
<body>
<spantarget="tag"value="1">添加</span><br/>
<spantarget="tag"value="2">修改</span><br/>
<spantarget="tag"value="3">删除</span><br/>
<spantarget="key"value="a">添加另外一条</span><br/>
<script>
$(".add").on("click",function(){
vartarget=$(this).attr("target");
varvalue=$(this).attr("value");
webUI.addParama(target,value);
})
$(".delete").on("click",function(){
vartarget=$(this).attr("target");
webUI.delParama(target);
})
</script>
</body>
</html>
Javascript代码：
varwebUI={
//添加url参数
addParama:function(key,val){
varsearch=window.location.search;
if(search.indexOf('?')!=-1){
search=search.substring(1);
varsearch_arr=search.split('&');
varurl_arr=[];
varexists=0;
for(vari=0;i<search_arr.length;i++){
if(!search_arr[i])
continue;
vartemp=search_arr[i].split('=');
if(key==temp[0]){
exists=1;
url_arr.push(key+'='+val);
}else{
if(temp[0]!='page'&&temp[0]!='token'){
url_arr.push(search_arr[i]);
}
}
}
if(!exists)
url_arr.push(key+'='+val);
url=window.location.pathname+'?'+url_arr.join('&');
}else{
url=window.location.pathname+'?'+key+'='+val;
}
window.location.href=url;
},
/*
*添加url参数
*jsonArr:添加参数数组
*delArr:删除参数数组
*demo:webUI.addMultiParama([{'key':'from','val':from},
*{'key':'to','val':to}],[{'key':'recently'}]);
*/
addMultiParama:function(jsonArr,delArr){
vardelArr=delArr||[];
varsearch=window.location.search;
if(search.indexOf('?')!=-1){
search=search.substring(1);
varsearch_arr=search.split('&');
varurl_arr=[];
varupdate_arr=[];
//delparama
if(delArr.length>0){
for(vari=0;i<search_arr.length;i++){
vartemp=search_arr[i].split('=');
for(varj=0;j<delArr.length;j++){
if(temp[0]==delArr[j].key){
search_arr.splice(i,1);
}
}
}
}
//判断未添加的情况
for(varj=0;j<jsonArr.length;j++){
varexists=0;
for(vari=0;i<search_arr.length;i++){
if(!search_arr[i])
continue;
vartemp=search_arr[i].split('=');
if(jsonArr[j].key==temp[0]){
exists=1;
}
}
if(!exists){
url_arr.push(jsonArr[j].key+'='+jsonArr[j].val);
}else{
update_arr.push({'key':jsonArr[j].key,'val':jsonArr[j].val});
}
}
for(vari=0;i<search_arr.length;i++){
if(!search_arr[i])
continue;
vartemp=search_arr[i].split('=');
varupdate=0;
for(varj=0;j<update_arr.length;j++){
if(update_arr[j].key==temp[0]){
update=1;
url_arr.push(update_arr[j].key+'='+update_arr[j].val);
}
}
if(!update){
if(temp[0]!='page'&&temp[0]!='token'){
url_arr.push(search_arr[i]);
}
}
}
}else{
varurl_arr=[];
for(varj=0;j<jsonArr.length;j++){
url_arr.push(jsonArr[j].key+'='+jsonArr[j].val);
}
}
url=window.location.pathname+'?'+url_arr.join('&');
window.location.href=url;
},
//delurl参数
delParama:function(key){
varsearch=window.location.search;
if(search.indexOf(key)!=-1){
search=search.substring(1);
varsearch_arr=search.split('&');
varurl_arr=[];
for(vari=0;i<search_arr.length;i++){
vartemp=search_arr[i].split('=');
if(key!=temp[0]){
url_arr.push(search_arr[i]);
}
}
url=window.location.pathname+'?'+url_arr.join('&');
}
window.location.href=url;
}
};
非常好用。