web-dev-qa-db-fra.com

Comment créer des paramètres de requête en Javascript?

Est-il possible de créer les paramètres de requête pour effectuer une demande GET en JavaScript?

Comme dans Python vous avez urllib.urlencode() ), qui prend un dictionnaire (ou une liste de deux tuples) et crée une chaîne comme 'var1=value1&var2=value2'.

javascripturlurlencode
118
cnu

Voici:

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

Usage:

const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 };
const querystring = encodeQueryData(data);
182
Shog9

fonctionnel

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

Zabba a fourni dans un commentaire sur la réponse actuellement acceptée une suggestion qui me semble être la meilleure solution: utilisez jQuery.param () .

Si j'utilise jQuery.param() sur les données de la question d'origine, le code est simplement:

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

La variable params sera

"var1=value&var2=value"

Pour des exemples plus compliqués, entrées et sorties, voir la documentation jQuery.param () .

33
Kirby

RLSearchParams supporte de plus en plus les navigateurs.

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

const searchParams = new URLSearchParams(data);

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

Node.js offre le module chaîne de requête .

const querystring = require('querystring');

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

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'
29
Andrew Palmer

Cela devrait faire le travail:

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

Exemple:

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

Résultat:

name=John&postcode=W1%202DL
9
noego

Nous venons de publier arg.js , un projet visant à résoudre ce problème une fois pour toutes. Cela a toujours été si difficile, mais maintenant vous pouvez faire:

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

Et lire des ouvrages:

var name = Arg("name");

ou obtenir le tout:

var params = Arg.all();

et si vous vous souciez de la différence entre ?query=true et #hash=true, vous pouvez utiliser les méthodes Arg.query() et Arg.hash().

9
Mat Ryer

Si vous utilisez Prototype il y a Form.serialize

Si vous utilisez jQuery il y a Ajax/serialize

Je ne connais pas de fonctions indépendantes pour accomplir cela, cependant, mais une recherche sur Google a révélé des options prometteuses si vous n’utilisez pas actuellement de bibliothèque. Si vous ne l'êtes pas, vous devriez vraiment, car ils sont le paradis.

7
Paolo Bergantino

Je voudrais juste revenir sur cette question vieille de presque 10 ans. À l'ère de la programmation standard, le mieux est de configurer votre projet à l'aide d'un gestionnaire de dépendances (npm). Il existe toute une industrie artisanale de bibliothèques qui codent des chaînes de requête et prennent en charge tous les cas Edge. Ceci est l'un des plus populaires -

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

6
pscl

ES2017 (ES8)

En utilisant Object.entries() , qui retourne un tableau de l'objet [key, value] paires. Par exemple, pour {a: 1, b: 2} il reviendrait [['a', 1], ['b', 2]]. Il n'est pas supporté (et ne sera pas) uniquement par IE.

Code:

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

Exemple:

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

Résultat:

"name=John&gender=male"
6
Przemek

Une petite modification à TypeScript:

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