Comment construire une chaîne de requête avec Javascript

Question

Je me demande s'il y a quelque chose d'intégré à Javascript qui peut prendre un formulaire et retourner les paramètres de la requête, par exemple : "var1=value&var2=value2&arr[]=foo&arr[]=bar..."

Je me pose cette question depuis des années.

Answer 1

L'API URLSearchParams est disponible dans tous les navigateurs modernes. Par exemple :

const params = new URLSearchParams({
  var1: "value",
  var2: "value2",
  arr: "foo",
});
console.log(params.toString());
//Prints "var1=value&var2=value2&arr=foo"

Answer 2

Mise à jour 2k20 : utilisation Josh's solution avec URLSearchParams.toString() .

Vieille réponse :

---

Sans jQuery

var params = {
    parameter1: 'value_1',
    parameter2: 'value 2',
    parameter3: 'value&3' 
};

var esc = encodeURIComponent;
var query = Object.keys(params)
    .map(k => esc(k) + '=' + esc(params[k]))
    .join('&');

Pour les navigateurs qui ne prennent pas en charge la syntaxe de la fonction flèche, qui nécessite l'ES5, modifiez l'attribut .map... ligne vers

    .map(function(k) {return esc(k) + '=' + esc(params[k]);})

Answer 3

Si vous utilisez jQuery, vous pouvez consulter le site suivant jQuery.param() http://api.jquery.com/jQuery.param/

Exemple :

var params = {
    parameter1: 'value1',
    parameter2: 'value2',
    parameter3: 'value3' 
};
var query = $.param(params);
console.log(query);

Cela s'imprimera :

parameter1=value1&parameter2=value2&parameter3=value3

Answer 4

Cela ne répond pas directement à votre question, mais voici une fonction générique qui permet de créer une URL contenant des paramètres de chaîne de requête. Les paramètres (noms et valeurs) sont échappés de manière sûre pour être inclus dans une URL.

function buildUrl(url, parameters){
  var qs = "";
  for(var key in parameters) {
    var value = parameters[key];
    qs += encodeURIComponent(key) + "=" + encodeURIComponent(value) + "&";
  }
  if (qs.length > 0){
    qs = qs.substring(0, qs.length-1); //chop off last "&"
    url = url + "?" + qs;
  }
  return url;
}

// example:
var url = "http://example.com/";

var parameters = {
  name: "George Washington",
  dob: "17320222"
};

console.log(buildUrl(url, parameters));
// => http://www.example.com/?name=George%20Washington&dob=17320222

Answer 5

Créer un URL et ajouter les valeurs à l'objet seachParameters

let stringUrl = "http://www.google.com/search";
let url = new URL(stringUrl);
let params = url.searchParams;
params.append("q", "This is seach query");

console.log(url.toString());

La sortie sera

http://www.google.com/search?q=This+is+seach+query