使用 JavaScript 向 URL 添加参数答案

【问题标题】：Adding a parameter to the URL with JavaScript使用 JavaScript 向 URL 添加参数
【发布时间】：2010-10-03 23:12:57
【问题描述】：

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

原网址：

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

结果网址：

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

寻找一个 JavaScript 函数，该函数解析 URL 并查看每个参数，然后添加新参数或更新值（如果已存在）。

【问题讨论】：

您搜索过javascript url parsers 吗？您可以自己制作，对每个 & 字符进行拆分，但仅使用现有代码可能更容易。
我曾经遇到过类似的情况，我发现 Peter Bromberg 的 this article 非常有帮助：
window.history.pushState('page2', 'Title', document.location+'/page2.php');无需加载页面即可完成您的工作
这个问题在这里有更好的答案stackoverflow.com/questions/6953944/…
令人难以置信，这不是 JS 的这种糟糕语言的原生语言......

标签： javascript url parsing parameters query-string

【解决方案1】：

这适用于所有现代浏览器。

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

【讨论】：

【解决方案2】：

重置所有查询字符串

var params = { params1:"val1", params2:"val2" };
let str = jQuery.param(params);

let uri = window.location.href.toString();
if (uri.indexOf("?") > 0)
   uri = uri.substring(0, uri.indexOf("?"));

console.log(uri+"?"+str);
//window.location.href = uri+"?"+str;

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

以下内容：

合并重复的查询字符串参数
适用于绝对和相对 URL
在浏览器和节点中工作

/**
 * Adds query params to existing URLs (inc merging duplicates)
 * @param {string} url - src URL to modify
 * @param {object} params - key/value object of params to add
 * @returns {string} modified URL
 */
function addQueryParamsToUrl(url, params) {

    // if URL is relative, we'll need to add a fake base
    var fakeBase = !url.startsWith('http') ? 'http://fake-base.com' : undefined;
    var modifiedUrl = new URL(url || '', fakeBase);

    // add/update params
    Object.keys(params).forEach(function(key) {
        if (modifiedUrl.searchParams.has(key)) {
            modifiedUrl.searchParams.set(key, params[key]);
        }
        else {
            modifiedUrl.searchParams.append(key, params[key]);
        }
    });

    // return as string (remove fake base if present)
    return modifiedUrl.toString().replace(fakeBase, '');
}

例子：

// returns /guides?tag=api
addQueryParamsToUrl('/guides?tag=hardware', { tag:'api' })

// returns https://orcascan.com/guides?tag=api
addQueryParamsToUrl('https://orcascan.com/guides?tag=hardware', { tag: 'api' })

【讨论】：

【解决方案4】：

var MyApp = new Class();

MyApp.extend({
    utility: {
        queryStringHelper: function (url) {
            var originalUrl = url;
            var newUrl = url;
            var finalUrl;
            var insertParam = function (key, value) {
                key = escape(key);
                value = escape(value);

                //The previous post had the substr strat from 1 in stead of 0!!!
                var kvp = newUrl.substr(0).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('=');
                }

                finalUrl = kvp.join('&');

                return finalUrl;
            };

            this.insertParameterToQueryString = insertParam;

            this.insertParams = function (keyValues) {
                for (var keyValue in keyValues[0]) {
                    var key = keyValue;
                    var value = keyValues[0][keyValue];
                    newUrl = insertParam(key, value);
                }
                return newUrl;
            };

            return this;
        }
    }
});

【讨论】：