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

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"

Answer 2

ES2017 (ES8)

Utilisation de Object.entries() qui renvoie un tableau d'objets [key, value] paires. Par exemple, pour {a: 1, b: 2} il retournerait [['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"

Answer 3

chaîne d'interrogation peut vous aider.

Donc, vous pouvez

const querystring = require('querystring')

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

Answer 4

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

Je peux recommander Prototype JS, il fonctionne très bien. Le seul inconvénient que j'ai vraiment remarqué est sa taille (quelques centaines de kb) et sa portée (beaucoup de code pour ajax, dom, etc.). Ainsi, si vous ne voulez qu'un sérialiseur de formulaire, c'est trop, et à proprement parler si vous ne voulez que sa fonctionnalité Ajax (ce qui est principalement ce pour quoi je l'ai utilisé), c'est trop. Si vous ne faites pas attention, vous pouvez trouver qu'il fait un peu trop de "magie" (comme étendre chaque élément du domaine qu'il touche avec des fonctions Prototype JS juste pour trouver des éléments), ce qui le rend lent dans les cas extrêmes.

Answer 5

Si vous ne voulez pas utiliser une bibliothèque, cela devrait couvrir la plupart/toutes 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('&');
}