Como criar parâmetros de consulta em Javascript?

133

Existe alguma maneira de criar os parâmetros de consulta para fazer uma solicitação GET em JavaScript?

Assim como no Python, você urllib.urlencode()cria um dicionário (ou lista de duas tuplas) e cria uma string como 'var1=value1&var2=value2'.

cnu
fonte

Respostas:

189

Aqui está:

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

Uso:

const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 };
const querystring = encodeQueryData(data);
Shog9
fonte
12
Ao iterar com for, use hasOwnProperty para garantir a interoperabilidade.
troelskn 21/09/08
3
@troelskn, bom ponto ... embora nesse caso, alguém precisaria estender o Object.prototype para quebrá-lo, o que é uma péssima idéia para começar.
Shog9 21/09/08
1
@ Shog9 Por que é uma péssima ideia?
Cesar Canassa
@ Cesar, consulte: stackoverflow.com/questions/3832617/… **
Shog9
Apenas um pequeno detalhe, mas ret poderia ser const
Alkis Mavridis
85

URLSearchParams tem suporte crescente ao navegador.

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

const searchParams = new URLSearchParams(data);

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

O Node.js oferece o módulo querystring .

const querystring = require('querystring');

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

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'
Andrew Palmer
fonte
1
Definitivamente, a abordagem limpa e moderna. Você também pode ligar mais tarde livrementesearchParams.append(otherData)
kano
81

funcional

function encodeData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
}   
Manav
fonte
1
Agradável! .map () foi implementado no JavaScript 1.6, de modo que quase todos os navegadores, mesmo os de vovó, o suportam. Mas como você pode imaginar, o IE não exclui o IE 9+. Mas não se preocupe, há uma solução alternativa. Fonte: developer.mozilla.org/pt-BR/docs/JavaScript/Reference/…
Akseli Palé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?Deve produzir https://www.something.com/?bloop1=true&bloop2=something?
dylanh724
1
@DylanHunt: Sim…
Przemek
38

O Zabba forneceu em um comentário sobre a resposta atualmente aceita uma sugestão de que para mim é a melhor solução: use jQuery.param () .

Se eu usar jQuery.param()os dados na pergunta original, o código será simplesmente:

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

A variável paramsserá

"var1=value&var2=value"

Para exemplos, entradas e saídas mais complicados, consulte a documentação do jQuery.param () .

Kirby
fonte
10

Acabamos de lançar o arg.js , um projeto que visa solucionar esse problema de uma vez por todas. Tradicionalmente, tem sido tão difícil, mas agora você pode fazer:

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

E a leitura funciona:

var name = Arg("name");

ou obter todo o lote:

var params = Arg.all();

e se você se importa com a diferença entre ?query=truee #hash=trueentão pode usar os métodos Arg.query()e Arg.hash().

Mat Ryer
fonte
9

Isso deve fazer o trabalho:

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

Exemplo:

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

Resultado:

name=John&postcode=W1%202DL
noego
fonte
1
Mais tarde, percebi que na verdade é uma versão ligeiramente diferente da resposta do @ manav abaixo. Mas de qualquer maneira, ainda pode ser preferível a sintaxe do ES6.
noego 16/03/18
Primeiro de tudo, você não está codificando as chaves. Além disso, você deve usar em encodeURIComponent()vez de encodeURI. Leia sobre a diferença .
Przemek #
9

ES2017 (ES8)

Fazendo uso de Object.entries(), que retorna uma matriz de [key, value]pares de objetos . Por exemplo, {a: 1, b: 2}pois retornaria [['a', 1], ['b', 2]]. Não é suportado (e não será) apenas pelo IE.

Código:

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

Exemplo:

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

Resultado:

"name=John&gender=male"
Przemek
fonte
8

Se você estiver usando Prototype, existe Form.serialize

Se você estiver usando jQuery,Ajax / serialize

Porém, não conheço nenhuma função independente para fazer isso, mas uma pesquisa no google revelou algumas opções promissoras se você não estiver usando uma biblioteca no momento. Se você não é, você realmente deveria, porque eles são o paraíso.

Paolo Bergantino
fonte
6
jQuery.param () pega o objeto e o transforma em string de consulta GET (essa função corresponde melhor à pergunta).
21415 azurkin
5

Gostaria de revisitar essa pergunta de quase 10 anos. Nesta era de programação pronta para uso, sua melhor aposta é configurar seu projeto usando um gerente de dependência ( npm). Existe toda uma indústria de bibliotecas caseiras por aí que codifica as strings de consulta e cuida de todos os casos extremos. Este é um dos mais populares -

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

pscl
fonte
Resposta muito inespecífica.
masterxilo 6/03
2

Uma pequena modificação no texto datilografado:

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

Este tópico aponta para algum código para escape de URLs em php. Há escape()e unescape()que fará a maior parte do trabalho, mas você precisará adicionar algumas coisas extras.

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;
}
Kibbee
fonte
3
encodeURIComponent lida com isso e não usa incorretamente + para um espaço.
AnthonyWJones