Come creare parametri di query in Javascript?


133

Esiste un modo per creare i parametri della query per eseguire una richiesta GET in JavaScript?

Proprio come in Python urllib.urlencode(), che contiene un dizionario (o un elenco di due tuple) e crea una stringa simile 'var1=value1&var2=value2'.

Risposte:


189

Ecco qui:

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

12
Durante l'iterazione con for, utilizzare hasOwnProperty per garantire l'interoperabilità.
troelskn,

3
@troelskn, buon punto ... anche se in questo caso qualcuno dovrebbe estendere Object.prototype per romperlo, che è una pessima idea per cominciare.
Shog9,

1
@ Shog9 Perché è una cattiva ideia?
Cesar Canassa,


Solo un piccolo dettaglio, ma ret potrebbe essere costante
Alkis Mavridis,

85

URLSearchParams ha un crescente supporto per il browser.

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

const searchParams = new URLSearchParams(data);

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

Node.js offre il modulo querystring .

const querystring = require('querystring');

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

const searchParams = querystring.stringify(data);

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

1
Sicuramente l'approccio pulito e moderno. In seguito puoi anche chiamare liberamentesearchParams.append(otherData)
kano il

81

funzionale

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

1
Ben fatto! .map () è stato implementato in JavaScript 1.6, quindi quasi tutti i browser, anche quelli nonni, lo supportano. Ma come puoi immaginare IE non esclude IE 9+. Ma non preoccuparti, c'è una soluzione alternativa. Fonte: developer.mozilla.org/en-US/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?Dovrebbe produrre https://www.something.com/?bloop1=true&bloop2=something?
dylanh724,

1
@DylanHunt: Sì ...
Przemek,

38

Zabba ha fornito in un commento sulla risposta attualmente accettata un suggerimento che per me è la soluzione migliore: utilizzare jQuery.param () .

Se utilizzo jQuery.param()i dati nella domanda originale, il codice è semplicemente:

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

La variabile paramssarà

"var1=value&var2=value"

Per esempi, input e output più complicati, consultare la documentazione di jQuery.param () .


10

Abbiamo appena rilasciato arg.js , un progetto volto a risolvere questo problema una volta per tutte. Tradizionalmente è stato così difficile ma ora puoi fare:

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

E la lettura funziona:

var name = Arg("name");

o ottenere l'intero lotto:

var params = Arg.all();

e se ti interessa la differenza tra ?query=truee #hash=trueallora puoi usare i metodi Arg.query()e Arg.hash().


9

Questo dovrebbe fare il lavoro:

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

Esempio:

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

Risultato:

name=John&postcode=W1%202DL

1
In seguito ho capito che in realtà è una versione leggermente diversa della risposta di @ manav di seguito. Ma comunque, potrebbe essere preferibile per la sintassi ES6.
noego

Prima di tutto, non stai codificando le chiavi. Inoltre, dovresti usare encodeURIComponent()invece di encodeURI. Leggi la differenza .
Przemek,

9

ES2017 (ES8)

Facendo uso di Object.entries(), che restituisce una matrice di [key, value]coppie di oggetti . Ad esempio, perché {a: 1, b: 2}ritornerebbe [['a', 1], ['b', 2]]. Non è supportato (e non lo sarà) solo da IE.

Codice:

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

Esempio:

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

Risultato:

"name=John&gender=male"

8

Se stai usando Prototype c'è Form.serialize

Se stai usando jQuery c'è Ajax / serialize

Non conosco alcuna funzione indipendente per raggiungere questo obiettivo, tuttavia, ma una ricerca su Google per esso ha rivelato alcune opzioni promettenti se al momento non stai utilizzando una libreria. Se non lo sei, però, dovresti davvero perché sono il paradiso.


6
jQuery.param () prende l'oggetto e lo trasforma in stringa di query GET (questa funzione risponde meglio alla domanda).
Azurkin,

5

Proprio come rivisitare questa domanda di quasi 10 anni. In questa era di programmazione standard, la soluzione migliore è impostare il progetto usando un gestore dipendenze ( npm). Esiste un intero settore industriale di librerie là fuori che codifica stringhe di query e si occupa di tutti i casi limite. Questo è uno dei più popolari -

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


Risposta molto non specifica.
Masterxilo,

2

Una piccola modifica al dattiloscritto:

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

-11

Questo thread punta ad alcuni codici per l'escape degli URL in php. C'è escape()e unescape()che farà la maggior parte del lavoro, ma è necessario aggiungere un paio di cose extra.

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 gestisce questo e non usa erroneamente + per uno spazio.
AnthonyWJones,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.