162

有什么方法可以创建用于在 JavaScript中执行GET 请求的查询参数？

就像在 Python 中你有urllib.urlencode()，它接受一个字典（或两个元组的列表）并创建一个像'var1=value1&var2=value2'.

4

14 回答 14

213

干得好：

function encodeQueryData(data) {
   const ret = [];
   for (let d in data)
     ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
   return ret.join('&');
}

用法：

const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 };
const querystring = encodeQueryData(data);
于 2008-09-21T17:53:45.457 回答
160

URLSearchParams增加了对浏览器的支持。

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = new URLSearchParams(data);

// searchParams.toString() === 'var1=value1&var2=value2'

Node.js 提供了查询字符串模块。

const querystring = require('querystring');

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'
于 2018-08-26T16:41:51.540 回答
83

功能性的

function encodeData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
}
于 2012-08-20T15:31:41.550 回答
41

Zabba在对当前接受的答案的评论中提供了对我来说是最佳解决方案的建议：使用jQuery.param()。

如果我jQuery.param()在原始问题中使用数据，那么代码很简单：

const params = jQuery.param({
    var1: 'value',
    var2: 'value'
});

变量params将是

"var1=value&var2=value"

有关更复杂的示例、输入和输出，请参阅jQuery.param()文档。

于 2015-07-23T22:38:46.697 回答
14

ES2017 (ES8)

利用Object.entries()，它返回一个对象[key, value]对的数组。例如，因为{a: 1, b: 2}它会返回[['a', 1], ['b', 2]]. 只有 IE 不支持（也不会）。

代码：

const buildURLQuery = obj =>
      Object.entries(obj)
            .map(pair => pair.map(encodeURIComponent).join('='))
            .join('&');

例子：

buildURLQuery({name: 'John', gender: 'male'});

结果：

"name=John&gender=male"
于 2018-05-20T15:10:43.177 回答
10

我们刚刚发布了arg.js，这是一个旨在一劳永逸地解决这个问题的项目。传统上这很困难，但现在你可以做到：

var querystring = Arg.url({name: "Mat", state: "CO"});

和阅读作品：

var name = Arg("name");

或得到全部：

var params = Arg.all();

如果您关心 and 之间的区别?query=true，#hash=true那么您可以使用Arg.query()andArg.hash()方法。

于 2013-09-30T17:38:23.300 回答
9

这应该做的工作：

const createQueryParams = params => 
      Object.keys(params)
            .map(k => `${k}=${encodeURI(params[k])}`)
            .join('&');

例子：

const params = { name : 'John', postcode: 'W1 2DL'}
const queryParams = createQueryParams(params)

结果：

name=John&postcode=W1%202DL
于 2018-03-16T17:18:36.993 回答
8

如果您使用的是原型，则有Form.serialize

如果您使用的是jQuery，则有Ajax/serialize

不过，我不知道有任何独立的函数可以完成此任务，但是如果您当前没有使用库，那么通过谷歌搜索它会发现一些有希望的选项。但是，如果您不是，那么您真的应该这样做，因为它们是天堂。

于 2008-09-21T17:49:10.040 回答
5

就像重新审视这个将近 10 年的问题一样。在这个现成的编程时代，最好的办法是使用依赖管理器 ( npm) 设置您的项目。那里有一个完整的库行业，可以对查询字符串进行编码并处理所有边缘情况。这是比较流行的一种——

https://www.npmjs.com/package/query-string

于 2017-05-30T23:59:00.937 回答
3

对打字稿的一点修改：

  public encodeData(data: any): string {
    return Object.keys(data).map((key) => {
      return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
  }
于 2016-11-08T13:43:55.987 回答
0

我改进了shog9处理数组值的功能

function encodeQueryData(data) {
    const ret = [];
    for (let d in data) {
        if (typeof data[d] === 'object' || typeof data[d] === 'array') {
            for (let arrD in data[d]) {
                ret.push(`${encodeURIComponent(d)}[]=${encodeURIComponent(data[d][arrD])}`)
            }
        } else if (typeof data[d] === 'null' || typeof data[d] === 'undefined') {
            ret.push(encodeURIComponent(d))
        } else {
            ret.push(`${encodeURIComponent(d)}=${encodeURIComponent(data[d])}`)
        }

    }
    return ret.join('&');
}

例子

let data = {
  user: 'Mark'
  fruits: ['apple', 'banana']
}

encodeQueryData(data) // user=Mark&fruits[]=apple&fruits[]=banana
于 2020-10-08T09:58:33.097 回答
0

通过使用queryencoder，您可以拥有一些不错的选项，例如自定义日期格式化程序、嵌套对象并决定 aval: true是否为 justvalue或value=true。

const { encode } = require('queryencoder');

const object = {
    date: new Date('1999-04-23')
};

// The result is 'date=1999-04-23'
const queryUrl = encode(object, {
    dateParser: date => date.toISOString().slice(0, 10)
});
于 2021-06-27T11:11:17.093 回答
0

这是一个例子：

let my_url = new URL("https://stackoverflow.com")
my_url.pathname = "/questions"

const parameters = {
    title: "just",
    body: 'test'
}

Object.entries(parameters).forEach(([name, value]) => my_url.searchParams.set(name, value))

console.log(my_url.href)
于 2022-02-01T14:10:44.537 回答
-12

该线程指向一些用于在 php.ini 中转义 URL 的代码。There's escape()and unescape()which 将完成大部分工作，但你需要添加一些额外的东西。

function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}

function urldecode(str) {
str = str.replace('+', ' ');
str = unescape(str);
return str;
}
于 2008-09-21T17:50:17.760 回答