使用 JavaScript 或 jQuery 编写带有 GET 参数的链接的最佳方法是啥

Posted 2023-02-22

【中文标题】使用 JavaScript 或 jQuery 编写带有 GET 参数的链接的最佳方法是啥

【英文标题】：What is the best way to compose a link with GET parameters using JavaScript or jQuery使用 JavaScript 或 jQuery 编写带有 GET 参数的链接的最佳方法是什么

【发布时间】：2016-12-20 07:09:46

【问题描述】：

我想用从变量中收集的几个 GET 参数组成一个链接。例如：

link.php?param1=value1&param2=value2&param3=value3

在 javascript 中，如果我已经将变量 var1、var2 和 var3 设置为相应的值，我知道可以通过连接字符串和变量来组成链接，如下所示：

url = "link.php?param1=" + var1 + "&param2=" + var2 + "&param3=" + var3;

有没有更清洁或更好的方法来做到这一点？在 jQuery 中，AJAX 请求函数接受一个数据参数，可以很容易地设置如下：

$.ajax(
  url: url,
  data:
    param1: var1,
    param2: var2, 
    param3: var3
  
);

是否有类似的方法来编写链接，但只需将其存储在变量中而不是执行 ajax 请求？

我知道 jQuery 的 .get() 函数，正如文档所述：

“使用 HTTP GET 请求从服务器加载数据。”

我不想要这个，我只需要编写链接。

【问题讨论】：

我正在使用this module 来做到这一点。它允许您解析和字符串化查询字符串，例如queryString.stringify(color: ['taupe', 'chartreuse'], id: '515');。

【参考方案1】：

var makeFullUrl = function (url, params) 
    return [url, Object.keys(params || ).map(function (key) 
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    ).join('&')].join('?');
;

这是我不久前（在 ES2015 之前）创建的一个函数 - 使用基本 URL 作为参数 1 调用它，以及像

这样的对象

    param1Name: param1Value,
    param2Name: param2Value

这是为 ES2015 准备的，为 laffs 准备的

var makeFullUrl = (url, params) => [url, Object.keys(params || ).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key])).join('&')].join('?');