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

Question

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

就像在Python中一样，你有 urllib.urlencode（） ，它接收字典（或两个元组的列表）并创建一个字符串，如'var1 = value1＆amp; 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

Zabba 已就当前接受的答案发表评论，建议对我来说是最佳解决方案：使用< a href =“http://api.jquery.com/jQuery.param/”rel =“nofollow noreferrer”> jQuery.param（）。

如果我对原始问题中的数据使用 jQuery.param（），那么代码就是：

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

变量 params 将是

"var1=value&var2=value"

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

Answer 4

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 5

我们刚刚发布了 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 6

这应该做的工作：

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 7

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

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

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

Answer 8

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

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

Answer 9

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 10

对打字稿进行一点修改：

  public encodeData(data: any): string {
    return Object.keys(data).map((key) => {
      return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
  }

Answer 11

thread 指向一些用于在php中转义URL的代码。有 escape（）和 unescape（），它们可以完成大部分工作，但你需要添加一些额外的东西。

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