使用 JavaScript 向 URL 添加参数

IT技术 javascript url parsing parameters query-string
2021-01-19 00:03:27

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

原网址:

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

结果网址:

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

寻找一个 JavaScript 函数来解析 URL,查看每个参数,然后添加新参数或更新值(如果已经存在)。

6个回答

您可以使用以下之一:

例子:

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);
我想添加一个没有值的查询参数,例如添加XMLhttp://foo.bar/?x=1&y=2以便最终结果是http://foo.bar/?x=1&y=2&XML. 这可能吗?我试过url.searchParams.set('XML');,,url.searchParams.set('XML', null);url.searchParams.set('XML', undefined);- 但没有在Chrome 63 中工作
2021-03-13 00:03:27
好消息@MJeffryes!IE 和 Netscape 仍然不支持。
2021-03-15 00:03:27
谢谢!太糟糕了,iOS 尚不支持它。developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
2021-03-19 00:03:27
可惜IE不支持。
2021-03-24 00:03:27
iOS 现在支持 URLSearchParams(自@kanji 评论后 9 天起)
2021-03-29 00:03:27

您需要调整的基本实现如下所示:

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

    // kvp looks like ['key1=value1', 'key2=value2', ...]
    var kvp = document.location.search.substr(1).split('&');
    let i=0;

    for(; i<kvp.length; i++){
        if (kvp[i].startsWith(key + '=')) {
            let pair = kvp[i].split('=');
            pair[1] = value;
            kvp[i] = pair.join('=');
            break;
        }
    }

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

    // can return this or...
    let params = kvp.join('&');

    // reload page with new params
    document.location.search = params;
}

这大约是基于正则表达式或基于搜索的解决方案的两倍,但这完全取决于查询字符串的长度和任何匹配项的索引


我为了完成而进行基准测试的慢正则表达式方法(大约慢 150%)

function insertParam2(key,value)
{
    key = encodeURIComponent(key); value = encodeURIComponent(value);

    var s = document.location.search;
    var kvp = key+"="+value;

    var r = new RegExp("(&|\\?)"+key+"=[^\&]*");

    s = s.replace(r,"$1"+kvp);

    if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};

    //again, do what you will here
    document.location.search = s;
}
再次感谢。有关这些方法的基本比较,请参阅lessanvaezi.com/wp-content/uploads/2009/01/test.html
2021-03-11 00:03:27
使用escape() 来转义URL 参数是错误的。它会中断带有“+”的值。您应该使用 encodeURIComponent 代替。完整讨论:xkr.us/articles/javascript/encode-compare
2021-03-21 00:03:27
当 url 中没有参数时,您会得到一个 ?¶m=value
2021-03-30 00:03:27
我正在调用这个函数,页面正在无限循环中重新加载。请帮忙!
2021-04-03 00:03:27
你不应该使用encodeURIComponent而不是encodeURI吗?否则=&您的名称或值中的任何字符,如,都会破坏 URI。
2021-04-09 00:03:27
const urlParams = new URLSearchParams(window.location.search);

urlParams.set('order', 'date');

window.location.search = urlParams;

.set 第一个参数是键,第二个参数是值。

IE 不支持此答案中URLSearchParams文档
2021-03-11 00:03:27
喜欢它的简单性,它使用本机浏览器方法
2021-03-16 00:03:27
如果您的目标是政府(2021 年 6 月),IE 仍然适用。
2021-03-18 00:03:27
这是正确的答案,应该获得最高投票。这个新的 API 是 URL 处理的权威
2021-03-29 00:03:27
IE 仍然相关吗?因为Edge现在在这里?
2021-04-10 00:03:27

感谢大家的贡献。我使用了annakata代码并修改为还包括 url 中根本没有查询字符串的情况。希望这会有所帮助。

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

        var kvp = document.location.search.substr(1).split('&');
        if (kvp == '') {
            document.location.search = '?' + key + '=' + value;
        }
        else {

            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
            document.location.search = kvp.join('&');
        }
    }
这实际上应该检查if (kvp.length==1 && kvp[0]="")吗?
2021-03-20 00:03:27
这将是更好的变化从escape(key)escape(value)encodeURIComponent功能。
2021-03-24 00:03:27
@查尔斯L。更好的是if (document.location.search)
2021-03-31 00:03:27

这是非常简单的解决方案。它不控制参数的存在,也不改变现有值。它将您的参数添加到 end,因此您可以在后端代码中获得最新值。

function addParameterToURL(param){
    _url = location.href;
    _url += (_url.split('?')[1] ? '&':'?') + param;
    return _url;
}
@kanzure 这东西看起来很邪恶,但这正是我想要的。谢谢。
2021-03-15 00:03:27
您还应该考虑 url 中的“#”.. 这里有一些代码错误: url = (url.indexOf("?") != -1 ? url.split("?")[0]+"?"+part+"&"+url.split("?")[1] : (url.indexOf("#") != -1 ? url.split("#")[0]+"?"+part+"#"+ url.split("#")[1] : url+'?'+part));
2021-03-19 00:03:27
修理它。此函数不检查是否已提供参数。我对此进行了测试并得到了https://localhost/preview/inventory.html?sortci=priceASC&sortci=priceASC&sortci=stitle.
2021-03-26 00:03:27
@stephen 明白了:) 原来我在 16 年是个笨孩子:)
2021-03-28 00:03:27
为什么要拆分 url 来检查单个字符的存在?也不要忘记编码......更像是function appendQs(url, key, value) { return url + (url.indexOf('?') >= 0 ? "&" : '?') + encodeURIComponent(key) + "=" + encodeURIComponent(value); };
2021-04-06 00:03:27