在一个使用AJAX调用的web应用程序中，我需要提交一个请求，但在URL的末尾添加一个参数，例如:
原始URL:
http://server/myapp.php?id=10
导致的网址:
http://server/myapp.php?id=10&enabled=true
寻找一个JavaScript函数，该函数解析URL并查看每个参数，然后添加新参数或更新已经存在的值。
当前回答
以下功能将帮助您添加，更新和删除参数或从URL。
/ / example1and
var myURL = '/search';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search
/ / example2
var myURL = '/search?category=mobile';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile
/ /青年们
var myURL = '/search?location=texas';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search
/ / example4
var myURL = '/search?category=mobile&location=texas';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile
/ / example5
var myURL = 'https://example.com/search?location=texas#fragment';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california#fragment
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york#fragment
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search#fragment
这是函数。
function updateUrl(url,key,value){
if(value!==undefined){
value = encodeURI(value);
}
var hashIndex = url.indexOf("#")|0;
if (hashIndex === -1) hashIndex = url.length|0;
var urls = url.substring(0, hashIndex).split('?');
var baseUrl = urls[0];
var parameters = '';
var outPara = {};
if(urls.length>1){
parameters = urls[1];
}
if(parameters!==''){
parameters = parameters.split('&');
for(k in parameters){
var keyVal = parameters[k];
keyVal = keyVal.split('=');
var ekey = keyVal[0];
var evalue = '';
if(keyVal.length>1){
evalue = keyVal[1];
}
outPara[ekey] = evalue;
}
}
if(value!==undefined){
outPara[key] = value;
}else{
delete outPara[key];
}
parameters = [];
for(var k in outPara){
parameters.push(k + '=' + outPara[k]);
}
var finalUrl = baseUrl;
if(parameters.length>0){
finalUrl += '?' + parameters.join('&');
}
return finalUrl + url.substring(hashIndex);
}
其他回答
这是一个非常简单的解决方案。它不控制参数的存在，也不改变现有的值。它将参数添加到end，因此可以在后端代码中获得最新值。
function addParameterToURL(param){
_url = location.href;
_url += (_url.split('?')[1] ? '&':'?') + param;
return _url;
}
我添加我的解决方案，因为它支持相对url除了绝对url。在其他方面，它与顶部的答案相同，后者也使用Web API。
/**
* updates a relative or absolute
* by setting the search query with
* the passed key and value.
*/
export const setQueryParam = (url, key, value) => {
const dummyBaseUrl = 'https://dummy-base-url.com';
const result = new URL(url, dummyBaseUrl);
result.searchParams.set(key, value);
return result.toString().replace(dummyBaseUrl, '');
};
还有人开玩笑说:
// some jest tests
describe('setQueryParams', () => {
it('sets param on relative url with base path', () => {
// act
const actual = setQueryParam(
'/', 'ref', 'some-value',
);
// assert
expect(actual).toEqual('/?ref=some-value');
});
it('sets param on relative url with no path', () => {
// act
const actual = setQueryParam(
'', 'ref', 'some-value',
);
// assert
expect(actual).toEqual('/?ref=some-value');
});
it('sets param on relative url with some path', () => {
// act
const actual = setQueryParam(
'/some-path', 'ref', 'some-value',
);
// assert
expect(actual).toEqual('/some-path?ref=some-value');
});
it('overwrites existing param', () => {
// act
const actual = setQueryParam(
'/?ref=prev-value', 'ref', 'some-value',
);
// assert
expect(actual).toEqual('/?ref=some-value');
});
it('sets param while another param exists', () => {
// act
const actual = setQueryParam(
'/?other-param=other-value', 'ref', 'some-value',
);
// assert
expect(actual).toEqual('/?other-param=other-value&ref=some-value');
});
it('honors existing base url', () => {
// act
const actual = setQueryParam(
'https://base.com', 'ref', 'some-value',
);
// assert
expect(actual).toEqual('https://base.com/?ref=some-value');
});
it('honors existing base url with some path', () => {
// act
const actual = setQueryParam(
'https://base.com/some-path', 'ref', 'some-value',
);
// assert
expect(actual).toEqual('https://base.com/some-path?ref=some-value');
});
});
这将在所有现代浏览器中工作。
function insertParam(key,value) {
if (history.pushState) {
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' +key+'='+value;
window.history.pushState({path:newurl},'',newurl);
}
}
最简单的解决方案，工作，如果你已经有一个标签或没有，并自动删除它，所以它不会一直添加相等的标签，有乐趣
function changeURL(tag)
{
if(window.location.href.indexOf("?") > -1) {
if(window.location.href.indexOf("&"+tag) > -1){
var url = window.location.href.replace("&"+tag,"")+"&"+tag;
}
else
{
var url = window.location.href+"&"+tag;
}
}else{
if(window.location.href.indexOf("?"+tag) > -1){
var url = window.location.href.replace("?"+tag,"")+"?"+tag;
}
else
{
var url = window.location.href+"?"+tag;
}
}
window.location = url;
}
THEN
changeURL("i=updated");
我会用这个小而完整的库来处理js中的url:
https://github.com/Mikhus/jsurl
