如何在Javascript中创建查询参数？

Question

有没有办法在JavaScript中创建用于执行GET请求的查询参数？

就像在Python中一样urllib.urlencode(),它接收字典(或两个元组的列表)并创建一个类似的字符串'var1=value1&var2=value2'.

Answer 1

干得好:

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

Answer 2

实用

function encodeData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
}   

Answer 3

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'

Answer 4

Zabba对当前接受的答案提出了一个评论,建议对我来说是最好的解决方案:使用jQuery.param().

如果我使用jQuery.param()原始问题中的数据,那么代码就是:

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

变量params将是

"var1=value&var2=value"

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

Answer 5

内置URL类提供了一个方便的接口来创建和解析 URL。

\n

没有任何网络方法需要确切的URL对象，字符串就足够了。因此从技术上讲，我们不必\xe2\x80\x99t 使用URL. 但有时它确实很有帮助。

\n

例子

\n

\r\n

\r\n

let url = new URL("https://google.com/search");\nurl.searchParams.set(\'var1\', "value1");\nurl.searchParams.set(\'var2\', "value2");\nurl.searchParams.set(\'var3\', "value3");\nurl.searchParams.set(\'var4\', "value4 has spaces");\n\nconsole.log(url)

\r\n

\r\n

\r\n

\n

Answer 6

我们刚刚发布了一个旨在一劳永逸地解决这个问题的项目arg.js.它传统上是如此困难,但现在你可以这样做:

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

阅读作品:

var name = Arg("name");

或获得全部:

var params = Arg.all();

如果你关心它们之间的区别?query=true,#hash=true那么你可以使用Arg.query()和Arg.hash()方法.

Answer 7

这应该做的工作:

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

Answer 8

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"

Answer 9

如果您使用Prototype,则有Form.serialize

如果你使用的是jQuery,那就是Ajax/serialize

我不知道有任何独立的功能可以实现这一点,但是如果你目前没有使用图书馆,谷歌搜索它会出现一些有希望的选项.但是,如果你不是,那你真的应该因为他们是天堂.

Answer 10

就像重新审视这个近10年的问题一样.在这个现成的编程时代,最好的办法是使用依赖管理器(npm)设置项目.有一个完整的图书馆小屋行业编码查询字符串并处理所有边缘情况.这是一个比较受欢迎的 -

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