在一个使用AJAX调用的web应用程序中,我需要提交一个请求,但在URL的末尾添加一个参数,例如:

原始URL:

http://server/myapp.php?id=10

导致的网址:

http://server/myapp.php?id=10&enabled=true

寻找一个JavaScript函数,该函数解析URL并查看每个参数,然后添加新参数或更新已经存在的值。


当前回答

好的,在这里我比较两个函数,一个由我自己(regExp)和另一个由(annakata)。

将数组:

function insertParam(key, value)
{
    key = escape(key); value = escape(value);

    var kvp = document.location.search.substr(1).split('&');

    var i=kvp.length; var x; while(i--) 
    {
        x = kvp[i].split('=');

        if (x[0]==key)
        {
                x[1] = value;
                kvp[i] = x.join('=');
                break;
        }
    }

    if(i<0) {kvp[kvp.length] = [key,value].join('=');}

    //this will reload the page, it's likely better to store this until finished
    return "&"+kvp.join('&'); 
}

正则表达式的方法:

function addParameter(param, value)
{
    var regexp = new RegExp("(\\?|\\&)" + param + "\\=([^\\&]*)(\\&|$)");
    if (regexp.test(document.location.search)) 
        return (document.location.search.toString().replace(regexp, function(a, b, c, d)
        {
                return (b + param + "=" + value + d);
        }));
    else 
        return document.location.search+ param + "=" + value;
}

测试用例:

time1=(new Date).getTime();
for (var i=0;i<10000;i++)
{
addParameter("test","test");
}
time2=(new Date).getTime();
for (var i=0;i<10000;i++)
{
insertParam("test","test");
}

time3=(new Date).getTime();

console.log((time2-time1)+" "+(time3-time2));

似乎即使使用最简单的解决方案(当regexp只使用test而不输入.replace函数时),它仍然比分裂要慢…好。Regexp有点慢,但是…喔…

其他回答

试一试 正则表达式,如此之慢,因此:

var SetParamUrl = function(_k, _v) {// replace and add new parameters

    let arrParams = window.location.search !== '' ? decodeURIComponent(window.location.search.substr(1)).split('&').map(_v => _v.split('=')) : Array();
    let index = arrParams.findIndex((_v) => _v[0] === _k); 
    index = index !== -1 ? index : arrParams.length;
    _v === null ? arrParams = arrParams.filter((_v, _i) => _i != index) : arrParams[index] = [_k, _v];
    let _search = encodeURIComponent(arrParams.map(_v => _v.join('=')).join('&'));

    let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + (arrParams.length > 0 ? '?' +  _search : ''); 

    // window.location = newurl; //reload 

    if (history.pushState) { // without reload  
        window.history.pushState({path:newurl}, null, newurl);
    }

};

var GetParamUrl = function(_k) {// get parameter by key

    let sPageURL = decodeURIComponent(window.location.search.substr(1)),
        sURLVariables = sPageURL.split('&').map(_v => _v.split('='));
    let _result = sURLVariables.find(_v => _v[0] === _k);
    return _result[1];

};

例子:

        // https://some.com/some_path
        GetParamUrl('cat');//undefined
        SetParamUrl('cat', "strData");// https://some.com/some_path?cat=strData
        GetParamUrl('cat');//strData
        SetParamUrl('sotr', "strDataSort");// https://some.com/some_path?cat=strData&sotr=strDataSort
        GetParamUrl('sotr');//strDataSort
        SetParamUrl('cat', "strDataTwo");// https://some.com/some_path?cat=strDataTwo&sotr=strDataSort
        GetParamUrl('cat');//strDataTwo
        //remove param
        SetParamUrl('cat', null);// https://some.com/some_path?sotr=strDataSort

这将在所有现代浏览器中工作。

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);
      }
    }

这是我自己的尝试,但我将使用annakata的答案,因为它看起来更清晰:

function AddUrlParameter(sourceUrl, parameterName, parameterValue, replaceDuplicates)
{
    if ((sourceUrl == null) || (sourceUrl.length == 0)) sourceUrl = document.location.href;
    var urlParts = sourceUrl.split("?");
    var newQueryString = "";
    if (urlParts.length > 1)
    {
        var parameters = urlParts[1].split("&");
        for (var i=0; (i < parameters.length); i++)
        {
            var parameterParts = parameters[i].split("=");
            if (!(replaceDuplicates && parameterParts[0] == parameterName))
            {
                if (newQueryString == "")
                    newQueryString = "?";
                else
                    newQueryString += "&";
                newQueryString += parameterParts[0] + "=" + parameterParts[1];
            }
        }
    }
    if (newQueryString == "")
        newQueryString = "?";
    else
        newQueryString += "&";
    newQueryString += parameterName + "=" + parameterValue;

    return urlParts[0] + newQueryString;
}

另外,我从stackoverflow上的另一篇文章中找到了这个jQuery插件,如果你需要更多的灵活性,你可以使用它: http://plugins.jquery.com/project/query-object

我认为代码应该是(还没有测试):

return $.query.parse(sourceUrl).set(parameterName, parameterValue).toString();

我添加我的解决方案,因为它支持相对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');
  });
});

重置所有查询字符串

Var params = {params:"val1", params:"val2"}; 让str = jQuery.param(参数); let uri = window.location. reff . tostring (); if (uri.indexOf("?") > 0) Uri = Uri。substring (0, uri.indexOf(“?”); console.log (uri +”?”+ str); / / window.location。Href = uri+"?"+str; < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本>