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

Question

Je me demandais simplement si quelque chose dans JavaScript pouvait prendre un formulaire et renvoyer les paramètres de la requête, par exemple: " var1 = valeur & amp; var2 = valeur2 & amp; arr [ ] = foo & amp; arr [] = barre ... & ";

Je me le demande depuis des années.

Answer 1

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 répond à 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 autorisant une sélection multiple.

Answer 2

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 nécessitant ES5, remplacez la .map... ligne par

.

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

Answer 3

Si vous utilisez jQuery, vous souhaiterez 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);

Answer 4

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 protégé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

Answer 5

Il existe maintenant des API pour cela, en particulier de l'API URLSearchParams Pour l'exemple donné:

const params = new URLSearchParams();
const formvals = {
   var1: "value",
   var2: "value2",
   arr: "foo",
};
for (const [key, val] of Object.entries(formvals)) {
   params.append(key, val);
}
console.log(params.toString());
// var1=value&var2=value2&arr=foo

Remarque: il s'agit de jolie compatibles avec Chrome et Firefox ces derniers temps, mais soyez prudent si vous devez travailler avec les navigateurs Microsoft et Apple, car la compatibilité est partielle.

Answer 6

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 7

ES2017 (ES8)

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

Answer 8

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

Je peux recommander le prototype JS, cela fonctionne très bien. Le seul inconvénient que j’ai vraiment remarqué 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 formulaire, c'est une surcharge, et à proprement parler, si vous ne voulez que la fonctionnalité Ajax (qui est principalement ce pour quoi je l'ai utilisée), c'est une surcharge. Si vous ne faites pas attention, vous constaterez peut-être que cela fait un peu trop & "Magique &"; (comme pour étendre chaque élément dom qu’il touche avec les fonctions Prototype JS juste pour trouver des éléments), ce qui le ralentit dans les cas extrêmes.

Answer 9

chaîne de requêtes peut vous aider.

Donc, vous pouvez

const querystring = require('querystring')

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

Answer 10

Si vous ne souhaitez pas utiliser une bibliothèque, cela devrait couvrir la plupart / tous les mêmes types d'élément 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('&');
}

Answer 11

Vous n'avez pas réellement 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'

Answer 12

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

Une chose que je sais avec certitude, est que lorsque vous créez des URL et que vous collez le produit dans le domaine, ne vous contentez pas d'utiliser de la colle à chaînes pour le faire, sinon vous vous ouvrirez la porte à un coupe-page très pratique.

Par exemple, certains logiciels publicitaires alignent la chaîne de version à partir de tout ce qui exécute votre flash. C’est bien quand sa chaîne adobes est générique, mais c’est cependant très naïf et explose dans un désordre embarrassant pour les personnes qui ont installé Gnash, car la chaîne de la version gnash’es contient une licence complète de droits d’auteur GPL, complétée par des URL et < un href > Mots clés. En utilisant cela dans votre générateur d'annonceurs, vous obtenez une page qui s'ouvre et un code HTML déséquilibré s'affiche dans le domaine.

La morale de l'histoire:

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

Non:

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

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

Answer 13

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

Answer 14

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

Answer 15

Vous pouvez le faire de nos jours avec FormData et URLSearchParams sans avoir besoin de boucler sur quoi que ce soit.

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

Cependant, les anciens navigateurs auront besoin d'un polyfill.

Answer 16

Ces réponses sont très utiles, mais je souhaite ajouter une autre réponse, qui peut vous aider à créer une URL complète. Cela peut vous aider à concattre les bases url, path, hash et 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);

Answer 17

C'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. Plusieurs exemples vous aideront: Documentation URI.js .
En voici un:

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"]);`

Answer 18

var params = { width:1680, height:1050 };
var str = jQuery.param( params );

console.log(str)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>