Wie Abfrageparameter in Javascript erstellen?

StackOverflow https://stackoverflow.com/questions/111529

  •  02-07-2019
  •  | 
  •  

Frage

Gibt es eine Möglichkeit, die Abfrageparameter für das Tun eines GET Anfrage in JavaScript zu erstellen?

Genau wie in Python Sie urllib.urlencode() , die in einem Wörterbuch (oder eine Liste von zwei Tupeln) führt und erzeugt eine Zeichenkette wie 'var1=value1&var2=value2'.

War es hilfreich?

Lösung

Hier gehen Sie: 

function encodeQueryData(data) {
   const ret = [];
   for (let d in data)
     ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
   return ret.join('&');
}

Verbrauch: 

const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 };
const querystring = encodeQueryData(data);

Andere Tipps

Funktions 

function encodeData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
}

Zabba hat in einem Kommentar zu der derzeit akzeptierten Antwort einen Vorschlag vorgesehen, dass für mich die beste Lösung: use < a href = "http://api.jquery.com/jQuery.param/" rel = "nofollow noreferrer"> jQuery.param () .

Wenn ich jQuery.param() auf die Daten in der ursprünglichen Frage verwenden, dann wird der Code ist einfach: 

const params = jQuery.param({
    var1: 'value',
    var2: 'value'
});

Die Variable params wird 

"var1=value&var2=value"

Für kompliziertere Beispiele, Ein- und Ausgänge finden Sie in der jQuery.param () Dokumentation.

URLSearchParams hat zunehmende Browser-Unterstützung. 

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = new URLSearchParams(data);

// searchParams.toString() === 'var1=value1&var2=value2'

Node.js bietet das Abfragezeichenfolgeflag Modul. 

const querystring = require('querystring');

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'

Wir haben gerade arg.js freigegeben, ein Projekt zur Lösung dieses Problems soll einmal und für alle. Es ist traditionell so schwierig gewesen, aber jetzt können Sie tun: 

var querystring = Arg.url({name: "Mat", state: "CO"});

Und das Lesen Werk: 

var name = Arg("name");

oder die ganze Menge bekommen: 

var params = Arg.all();

und wenn Sie über den Unterschied zwischen ?query=true und #hash=true kümmern, dann können Sie die Arg.query() und Arg.hash() Methoden verwenden.

Dies sollte die Arbeit machen: 

const createQueryParams = params => 
      Object.keys(params)
            .map(k => `${k}=${encodeURI(params[k])}`)
            .join('&');

Beispiel: 

const params = { name : 'John', postcode: 'W1 2DL'}
const queryParams = createQueryParams(params)

Ergebnis: 

name=John&postcode=W1%202DL

Wenn Sie mit Prototype gibt es Form.serialize

Wenn Sie mit jQuery ist Ajax / serialize

Ich weiß nicht, von irgendwelchen unabhängigen Funktionen, dies zu erreichen, obwohl, sondern eine Google-Suche für es stellte sich einige vielversprechende Optionen, wenn Sie derzeit keine Bibliothek. Wenn Sie nicht, obwohl, sollten Sie wirklich, weil sie den Himmel.

Genau wie diese fast 10 Jahre alte Frage zu überdenken. In dieser Ära der off-the-shelf-Programmierung, die beste Wahl ist Ihr Projekt zur Einrichtung eines Abhängigkeitsmanager (npm). Es gibt eine ganze Heimindustrie von Bibliotheken gab, die kodieren Query-Strings und kümmert sich um alle Grenzfälle. Dies ist eine der populäreren -

https://www.npmjs.com/package/query-string

ES2017 (ES8)

Die Nutzung von Object.entries() , welche gibt ein Array von Paaren [key, value] des Objekts. Zum Beispiel für {a: 1, b: 2} wäre es [['a', 1], ['b', 2]] zurückzukehren. Es wird nicht unterstützt (und wird nicht sein) nur durch IE.

Code: 

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

Beispiel: 

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

Ergebnis: 

"name=John&gender=male"

Eine kleine Änderung Typoskript: 

  public encodeData(data: any): string {
    return Object.keys(data).map((key) => {
      return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
  }
scroll top