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

Existe-t-il un moyen de créer les paramètres de requête pour effectuer une requête GET en JavaScript?

Tout comme en 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'.

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

URLSearchParams a une prise en charge croissante des navigateurs.

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

const searchParams = new URLSearchParams(data);

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

Node.js propose le module de 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'

fonctionnel

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

Zabba a fourni dans un commentaire sur la réponse actuellement acceptée une suggestion qui est pour moi la meilleure solution: utilisez jQuery.param () .

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

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

La variable paramssera

"var1=value&var2=value"

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

Nous venons de publier arg.js , un projet visant à résoudre ce problème une fois pour toutes. C'était traditionnellement si difficile, mais maintenant vous pouvez faire:

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

Et la lecture fonctionne:

var name = Arg("name");

ou obtenir le tout:

var params = Arg.all();

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

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

ES2017 (ES8)

Faire usage de Object.entries(), qui renvoie un tableau de [key, value]paires d'objets . Par exemple, car {a: 1, b: 2}il reviendrait [['a', 1], ['b', 2]]. Il n'est pas pris en charge (et ne le 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"

Si vous utilisez Prototype, il existe Form.serialize

Si vous utilisez jQuery, il y a Ajax / serialize

Cependant, je ne connais aucune fonction indépendante pour accomplir cela, mais une recherche sur Google a révélé des options prometteuses si vous n'utilisez pas actuellement de bibliothèque. Si ce n'est pas le cas, vous devriez vraiment le faire parce qu'ils sont le paradis.

Je voudrais revenir sur cette question vieille de presque 10 ans. À l'ère de la programmation standard, votre meilleur pari 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 les chaînes de requête et prennent en charge tous les cas extrêmes. C'est l'un des plus populaires -

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

Une petite modification au typographie:

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

Ce fil pointe vers du code pour échapper les URL en php. Il y a escape()et unescape()qui fera la plupart du travail, mais vous devez ajouter quelques choses supplémentaires.

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