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

J'ai essayé de trouver 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 .

Il n'est pas parfait mais il 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 une correspondance (clé -> valeur) des paramètres. l'entrée est l'élément de formulaire (élément DOM)

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

Answer 2

Vous pouvez le faire aujourd'hui avec FormData y URLSearchParams sans avoir besoin de boucler 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.

Answer 3

C'est peut-être un peu redondant, mais c'est la méthode la plus propre que j'ai trouvée et qui s'appuie sur certaines des réponses données 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,
})

Fuente

Answer 4

El UrlSearchParams est une excellente suggestion, mais je ne peux pas croire que personne n'ait mentionné l'incroyablement utile .get y .set méthodes. Elles peuvent être utilisées pour manipuler la chaîne de requête et non seulement elles sont très faciles à utiliser, mais elles résolvent également un certain nombre de problèmes que vous pourriez rencontrer. Par exemple, dans mon cas, je voulais construire une chaîne de requête sans clés dupliquées. .set résout ce problème pour vous. Citant le Documents MDN :

URLSearchParams.set() Définit la valeur associée à un paramètre de recherche donné à la valeur donnée. S'il y a plusieurs valeurs, les autres sont supprimées.

Exemple ( de MDN ) :

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

// Add a third parameter.
params.set('baz', 3);
params.toString(); // "foo=1&bar=2&baz=3"

Une syntaxe alternative, plus courte :

let url = new URL('https://example.com?foo=1&bar=2');

// Add a third parameter.
url.searchParams.set('baz', 3);
params.toString(); // "foo=1&bar=2&baz=3"

Answer 5

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 pour php.

Une chose dont je suis sûr, c'est que lorsque vous construisez des URL et que vous collez le produit dans le domaine, n'utilisez pas de la colle à ficelle pour le faire, ou vous vous exposez à un casse-page pratique.

Par exemple, certains logiciels de publicité intègrent la chaîne de version du logiciel qui exécute votre flash. C'est très bien quand il s'agit d'une simple chaîne générique d'adobes, mais cependant, c'est très naïf, et cela donne lieu à un désordre embarrassant pour les personnes qui ont installé Gnash, car la chaîne de version de gnash contient une licence de copyright GPL complète, avec des URL et des balises <a href>. L'utilisation de cette chaîne dans votre générateur de publicité à colle, a pour conséquence l'ouverture de la page et l'apparition d'un HTML déséquilibré 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, mais ils semblent s'en moquer.}