Comment créer une chaîne de requête avec Javascript

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

Je me demande cela depuis des années.

J'ai essayé de chercher une réponse à cette question il y a quelque temps, mais j'ai fini par écrire ma propre fonction qui extrait les valeurs du formulaire.

ce n'est pas parfait mais cela correspond à mes besoins.

function form_params( form )
{
    var params = new Array()
    var length = form.elements.length
    for( var i = 0; i < length; i++ )
    {
        element = form.elements[i]

        if(element.tagName == 'TEXTAREA' )
        {
            params[element.name] = element.value
        }
        else if( element.tagName == 'INPUT' )
        {
            if( element.type == 'text' || element.type == 'hidden' || element.type == 'password')
            {
                params[element.name] = element.value
            }
            else if( element.type == 'radio' && element.checked )
            {
                if( !element.value )
                    params[element.name] = "on"
                else
                    params[element.name] = element.value

            }
            else if( element.type == 'checkbox' && element.checked )
            {
                if( !element.value )
                    params[element.name] = "on"
                else
                    params[element.name] = element.value
            }
        }
    }
    return params;
}

form_params renvoie un mappage (clé -> valeur) des paramètres. l'entrée est l'élément de formulaire (élément DOM)

Il ne gère pas les champs permettant une sélection multiple.

Mise à jour 2k20: utilisez la solution de Josh avec URLSearchParams.toString () .

Ancienne 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 de flèche qui nécessite ES5, remplacez la .map...ligne par

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

Si vous utilisez jQuery, vous voudrez peut-être consulter jQuery.param() http://api.jquery.com/jQuery.param/

Exemple:

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

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"

Cela ne répond pas directement à votre question, mais voici une fonction générique qui créera une URL contenant des paramètres de chaîne de requête. Les paramètres (noms et valeurs) sont échappés en toute sécurité 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

Avec jQuery, vous pouvez le faire en $.param

$.param({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })

// -> "action=ship&order_id=123&fees%5B%5D=f1&fees%5B%5D=f2&label=a+demo"

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"

Non, je ne pense pas que JavaScript standard ait cela intégré, mais Prototype JS a cette fonction (sûrement la plupart des autres frameworks JS en ont aussi, mais je ne les connais pas), ils l'appellent sérialiser .

Je peux recommander Prototype JS, cela fonctionne assez bien. Le seul inconvénient que j'ai vraiment remarqué c'est sa taille (quelques centaines de ko) et sa portée (beaucoup de code pour ajax, dom, etc.). Ainsi, si vous ne voulez qu'un sérialiseur de formulaires, c'est exagéré, et à proprement parler si vous ne voulez que la fonctionnalité Ajax (qui est principalement ce pour quoi je l'ai utilisé), c'est exagéré. À moins que vous ne soyez prudent, vous constaterez peut-être qu'il fait un peu trop de «magie» (comme étendre chaque élément dom qu'il touche avec les fonctions Prototype JS juste pour trouver des éléments), ce qui ralentit les cas extrêmes.

querystring peut vous aider.

Afin que vous puissiez

const querystring = require('querystring')

url += '?' + querystring.stringify(parameters)

Si vous ne souhaitez pas utiliser de bibliothèque, cela devrait couvrir la plupart / tous les mêmes types d'éléments de formulaire.

function serialize(form) {
  if (!form || !form.elements) return;

  var serial = [], i, j, first;
  var add = function (name, value) {
    serial.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));
  }

  var elems = form.elements;
  for (i = 0; i < elems.length; i += 1, first = false) {
    if (elems[i].name.length > 0) { /* don't include unnamed elements */
      switch (elems[i].type) {
        case 'select-one': first = true;
        case 'select-multiple':
          for (j = 0; j < elems[i].options.length; j += 1)
            if (elems[i].options[j].selected) {
              add(elems[i].name, elems[i].options[j].value);
              if (first) break; /* stop searching for select-one */
            }
          break;
        case 'checkbox':
        case 'radio': if (!elems[i].checked) break; /* else continue */
        default: add(elems[i].name, elems[i].value); break;
      }
    }
  }

  return serial.join('&');
}

Vous n'avez pas besoin d'un formulaire pour le faire avec Prototype. Utilisez simplement la fonction Object.toQueryString :

Object.toQueryString({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })

// -> 'action=ship&order_id=123&fees=f1&fees=f2&label=a%20demo'

Vous pouvez le faire de nos jours avec FormDataet URLSearchParamssans avoir besoin de faire une boucle sur quoi que ce soit.

const formData = new FormData(form);
const searchParams = new URLSearchParams(formData);
const queryString = searchParams.toString();

Les navigateurs plus anciens auront cependant besoin d'un polyfill.

Je ne suis pas tout à fait sûr moi-même, je me souviens avoir vu jQuery le faire dans une certaine mesure, mais il ne gère pas du tout les enregistrements hiérarchiques, et encore moins d'une manière conviviale php.

Une chose que je sais avec certitude, c'est que lorsque vous créez des URL et que vous collez le produit dans le dom, n'utilisez pas simplement du string-glue pour le faire, ou vous vous ouvrirez à un sauteur de page pratique.

Par exemple, certains logiciels publicitaires incorporent la chaîne de version de tout ce qui exécute votre flash. C'est bien quand sa chaîne simple générique adobe, mais cependant, c'est très naïf, et explose dans un désordre embarrassant pour les personnes qui ont installé Gnash, car la chaîne de version de gnash se trouve contenir une licence de droit d'auteur GPL complète, avec des URL et <a href> balises. En utilisant cela dans votre générateur d'annonceurs string-glue, la page s'ouvre et le HTML déséquilibré apparaît dans le dom.

La morale de l'histoire:

   var foo = document.createElement("elementnamehere"); 
   foo.attribute = allUserSpecifiedDataConsideredDangerousHere; 
   somenode.appendChild(foo); 

Ne pas:

   document.write("<elementnamehere attribute=\"" 
        + ilovebrokenwebsites 
        + "\">" 
        + stringdata 
        + "</elementnamehere>");

_{Google doit apprendre cette astuce. J'ai essayé de signaler le problème, ils semblent s'en moquer.}

Comme le dit Stein, vous pouvez utiliser la bibliothèque prototype javascript de http://www.prototypejs.org . Incluez le JS et c'est très simple alors, $('formName').serialize()vous retournerez ce que vous voulez!

Pour ceux d'entre nous qui préfèrent jQuery, vous utiliserez le plugin de formulaire: http://plugins.jquery.com/project/form , qui contient une méthode formSerialize.

Peut-être un peu redondant mais le moyen le plus propre que j'ai trouvé qui s'appuie sur certaines des réponses ici:

const params: {
   key1: 'value1',
   key2: 'value2',
   key3: 'value3',
}

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

return fetch('my-url', {
  method: 'POST',
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  body: query,
})

La source

Ces réponses sont très utiles, mais je veux ajouter une autre réponse, qui peut vous aider à créer une URL complète. Cela peut vous aider concat de base url, path, hashet parameters.

var url = buildUrl('http://mywebsite.com', {
        path: 'about',
        hash: 'contact',
        queryParams: {
            'var1': 'value',
            'var2': 'value2',
            'arr[]' : 'foo'
        }
    });
    console.log(url);

Vous pouvez télécharger via npm https://www.npmjs.com/package/build-url

Démo:

;(function () {
  'use strict';

  var root = this;
  var previousBuildUrl = root.buildUrl;

  var buildUrl = function (url, options) {
    var queryString = [];
    var key;
    var builtUrl;
    var caseChange; 
    
    // 'lowerCase' parameter default = false,  
    if (options && options.lowerCase) {
        caseChange = !!options.lowerCase;
    } else {
        caseChange = false;
    }

    if (url === null) {
      builtUrl = '';
    } else if (typeof(url) === 'object') {
      builtUrl = '';
      options = url;
    } else {
      builtUrl = url;
    }

    if(builtUrl && builtUrl[builtUrl.length - 1] === '/') {
      builtUrl = builtUrl.slice(0, -1);
    } 

    if (options) {
      if (options.path) {
          var localVar = String(options.path).trim(); 
          if (caseChange) {
            localVar = localVar.toLowerCase();
          }
          if (localVar.indexOf('/') === 0) {
              builtUrl += localVar;
          } else {
            builtUrl += '/' + localVar;
          }
      }

      if (options.queryParams) {
        for (key in options.queryParams) {
          if (options.queryParams.hasOwnProperty(key) && options.queryParams[key] !== void 0) {
            var encodedParam;
            if (options.disableCSV && Array.isArray(options.queryParams[key]) && options.queryParams[key].length) {
              for(var i = 0; i < options.queryParams[key].length; i++) {
                encodedParam = encodeURIComponent(String(options.queryParams[key][i]).trim());
                queryString.push(key + '=' + encodedParam);
              }
            } else {              
              if (caseChange) {
                encodedParam = encodeURIComponent(String(options.queryParams[key]).trim().toLowerCase());
              }
              else {
                encodedParam = encodeURIComponent(String(options.queryParams[key]).trim());
              }
              queryString.push(key + '=' + encodedParam);
            }
          }
        }
        builtUrl += '?' + queryString.join('&');
      }

      if (options.hash) {
        if(caseChange)
            builtUrl += '#' + String(options.hash).trim().toLowerCase();
        else
            builtUrl += '#' + String(options.hash).trim();
      }
    } 
    return builtUrl;
  };

  buildUrl.noConflict = function () {
    root.buildUrl = previousBuildUrl;
    return buildUrl;
  };

  if (typeof(exports) !== 'undefined') {
    if (typeof(module) !== 'undefined' && module.exports) {
      exports = module.exports = buildUrl;
    }
    exports.buildUrl = buildUrl;
  } else {
    root.buildUrl = buildUrl;
  }
}).call(this);


var url = buildUrl('http://mywebsite.com', {
		path: 'about',
		hash: 'contact',
		queryParams: {
			'var1': 'value',
			'var2': 'value2',
			'arr[]' : 'foo'
		}
	});
	console.log(url);

Je sais que c'est une réponse très tardive mais fonctionne très bien ...

var obj = {
a:"a",
b:"b"
}

Object.entries(obj).map(([key, val])=>`${key}=${val}`).join("&");

note: object.entries renverra la clé, les paires de valeurs

la sortie de la ligne ci-dessus sera a = a & b = b

J'espère que ça aide quelqu'un.

Codage heureux ...

Il est probablement trop tard pour répondre à votre question.
J'avais la même question et je n'aimais pas continuer à ajouter des chaînes pour créer une URL. J'ai donc commencé à utiliser $ .param comme l' explique techhouse .
J'ai également trouvé une bibliothèque URI.js qui crée facilement les URL pour vous. Il y a plusieurs exemples qui vous aideront à : URI.js Documentation .
Voici l'un d'entre eux:

var uri = new URI("?hello=world");
uri.setSearch("hello", "mars"); // returns the URI instance for chaining
// uri == "?hello=mars"

uri.setSearch({ foo: "bar", goodbye : ["world", "mars"] });
// uri == "?hello=mars&foo=bar&goodbye=world&goodbye=mars"

uri.setSearch("goodbye", "sun");
// uri == "?hello=mars&foo=bar&goodbye=sun"

// CAUTION: beware of arrays, the following are not quite the same
// If you're dealing with PHP, you probably want the latter…
uri.setSearch("foo", ["bar", "baz"]);
uri.setSearch("foo[]", ["bar", "baz"]);`