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


132

有什么方法可以创建查询参数以在JavaScript中执行GET请求吗?

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

Answers:


189

干得好:

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

12
使用进行迭代时for,请使用hasOwnProperty以确保互操作性。
troelskn

3
@troelskn,好点……尽管在这种情况下,必须有人扩展Object.prototype才能将其破坏,这是一个非常糟糕的主意。
Shog9年

1
@ Shog9为什么这是一个糟糕的想法?
Cesar Canassa 2011年


只是一个小细节,但可以RET是const
Alkis Mavridis

84

URLSearchParams对浏览器的支持不断增加。

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

const searchParams = new URLSearchParams(data);

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

Node.js提供了querystring模块。

const querystring = require('querystring');

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

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'

1
绝对是干净而现代的方法。您也可以稍后免费致电searchParams.append(otherData)
卡诺

81

功能性

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

1
好一个!.map()已在JavaScript 1.6中实现,因此几乎所有浏览器(甚至是老婆浏览器)都支持它。但是您可以猜到,IE 9除了IE 9+以外没有。但是不用担心,有一种解决方法。来源:developer.mozilla.org/en-US/docs/JavaScript/Reference/...
AkseliPalén

var data = { bloop1: true, bloop2: "something" }; var url = "https://something.com/?"; var params = encodeData(data); var finalUrl = url + params; // Is this the right use?应该产生https://www.something.com/?bloop1=true&bloop2=something
dylanh724

1
@DylanHunt:是的…
Przemek

38

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

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

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

该变量params将是

"var1=value&var2=value"

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


10

我们刚刚发布了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()方法。


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

1
后来我意识到,它实际上与下面@manav的回复略有不同。但是无论如何,对于ES6语法,它仍然可能更可取。
noego

首先,您不对密钥进行编码。另外,您应使用encodeURIComponent()代替encodeURI了解差异
Przemek

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"

8

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

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

我不知道有任何独立的功能来完成此操作,但是如果您当前不使用库,则通过Google搜索它会发现一些有希望的选择。如果不是,那么您确实应该因为它们是天堂。


5
jQuery.param()获取对象并将其转换为GET查询字符串(此函数与问题更好地匹配)。
azurkin

5

就像重新审视这个将近10年的问题一样。在现成的编程时代,最好的选择是使用依赖项管理器(npm)设置项目。那里有整个图书馆行业,可以对查询字符串进行编码并处理所有极端情况。这是最受欢迎的游戏之一-

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


非常不确定的答案。
masterxilo

2

对打字稿进行一些修改:

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

-11

线程指向一些用于在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;
}

3
encodeURIComponent可以处理此问题,并且不会错误地在空格中使用+。
AnthonyWJones
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.