Come creare una stringa di query con Javascript

Question

Mi chiedo solo se c'è qualcosa di incorporato in Javascript che può prendere una forma e restituire i parametri della query, ad esempio: " var1 = valore & amp; var2 = valore2 & amp; arr [ &] = foo amp; arr [] = rovesciata ... quot &;

Me lo sto chiedendo da anni.

Answer 1

Ho provato a cercare una risposta a questa domanda qualche tempo fa, ma ho finito per scrivere la mia funzione che estrae i valori dal modulo ..

non è perfetto ma si adatta alle mie esigenze.

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 restituisce una mappatura (chiave - > valore) dei parametri. l'input è l'elemento form (elemento DOM)

Non gestisce i campi che consentono la selezione multipla.

Answer 2

Senza 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('&');

Per i browser che non supportano la sintassi della funzione freccia che richiede ES5, modificare la .map... riga in

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

Answer 3

Se stai usando jQuery potresti voler dare un'occhiata a jQuery.param() http: // api. jquery.com/jQuery.param/

Esempio:

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

Answer 4

Questo non risponde direttamente alla tua domanda, ma ecco una funzione generica che creerà un URL che contiene parametri della stringa di query. I parametri (nomi e valori) sono salvati in modo sicuro per l'inclusione in un 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

Ora ci sono API per questo, in particolare API URLSearchParams . Per l'esempio fornito:

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

Nota: è piuttosto compatibile al giorno d'oggi con Chrome e Firefox, ma fai attenzione se hai bisogno di lavorare con i browser Microsoft e Apple poiché la compatibilità è parziale.

Answer 6

Con jQuery puoi farlo $.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)

Uso di Object.entries() , che restituisce una matrice di [key, value] coppie di oggetti. Ad esempio, per {a: 1, b: 2} restituirebbe [['a', 1], ['b', 2]]. Non è supportato (e non lo sarà) solo da IE.

Codice:

const buildURLQuery = obj =>
      Object.entries(obj)
            .map(pair => pair.map(encodeURIComponent).join('='))
            .join('&');

Esempio:

buildURLQuery({name: 'John', gender: 'male'});

Risultato:

"name=John&gender=male"

Answer 8

No, non credo che JavaScript standard abbia quello incorporato, ma Prototype JS ha quella funzione (sicuramente la maggior parte degli altri framework JS ha anche, ma non li conosco), lo chiamano serializza .

Posso consigliare Prototype JS, funziona abbastanza bene. L'unico inconveniente che ho notato è che sono le dimensioni (alcune centinaia di kb) e l'ambito (un sacco di codice per Ajax, dom, ecc.). Quindi, se vuoi solo un serializzatore di moduli è eccessivo, e in senso stretto se vuoi solo la sua funzionalità Ajax (che è principalmente quello per cui l'ho usato) è eccessivo. A meno che tu non stia attento, potresti scoprire che fa un po 'troppo & Quot; magic & Quot; (come estendere ogni elemento dom che tocca con le funzioni Prototype JS solo per trovare elementi) rallentandolo in casi estremi.

Answer 9

querystring può aiutarti.

Quindi, puoi

const querystring = require('querystring')

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

Answer 10

Se non si desidera utilizzare una libreria, questo dovrebbe coprire la maggior parte / tutti gli stessi tipi di elementi del modulo.

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

In realtà non è necessario un modulo per farlo con Prototype. Basta usare Object.toQueryString function :

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

Non sono del tutto certo, ricordo di aver visto jQuery in una certa misura, ma non gestisce affatto i record gerarchici, figuriamoci in un modo php friendly.

Una cosa che so per certo, è quando si creano URL e si inserisce il prodotto nel dom, non si usa semplicemente la colla per stringhe per farlo, o ci si aprirà a un pratico interruttore di pagina.

Ad esempio, alcuni software pubblicitari incorporano la stringa della versione da qualunque cosa esegua il tuo flash. Questo va bene quando adotta una semplice stringa generica, ma è comunque molto ingenua e esplode in un disordine imbarazzante per le persone che hanno installato Gnash, poiché la stringa di versione di gnash contiene una licenza di copyright GPL completa, completa di URL e < a href > tag. Usando questo nel tuo generatore di inserzionisti colla-colla, la pagina si spalanca e fa apparire HTML sbilanciato nella dom.

La morale della storia:

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

Non:

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

_{Google deve imparare questo trucco. Ho provato a segnalare il problema, a quanto pare non importa.}

Answer 13

Come dice Stein, è possibile utilizzare la libreria prototipo javascript da http://www.prototypejs.org . Includi JS ed è molto semplice, $('formName').serialize() restituirà ciò che desideri!

Answer 14

Per quelli di noi che preferiscono jQuery, utilizzare il plug-in del modulo: http: // plugins. jquery.com/project/form , che contiene un metodo formSerialize.

Answer 15

Oggi puoi farlo con FormData e URLSearchParams senza la necessità di eseguire il loop su nulla.

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

Tuttavia, i browser meno recenti avranno bisogno di un polyfill.

Answer 16

Queste risposte sono molto utili, ma voglio aggiungere un'altra risposta, che potrebbe aiutarti a creare l'URL completo. Questo può aiutarti a concatenere la base url, path, hash e parameters.

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

Puoi scaricare via npm https://www.npmjs.com/package/build- url

Demo:

;(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

È probabilmente troppo tardi per rispondere alla tua domanda.
Ho avuto la stessa domanda e non mi piaceva continuare ad aggiungere stringhe per creare un URL. Quindi, ho iniziato a usare $ .param come spiegato techhouse .
Ho anche trovato una URI.js che crea facilmente gli URL per te. Ci sono diversi esempi che ti aiuteranno: Documentazione URI.js .
Eccone uno:

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>