webentwicklung-frage-antwort-db.com.de

Wie erstelle ich Abfrageparameter in Javascript?

Gibt es eine Möglichkeit, die Abfrageparameter zu erstellen, um eine GET-Anforderung auszuführen? in JavaScript?

Genau wie in Python Sie haben urllib.urlencode() , das ein Wörterbuch (oder eine Liste von zwei Tupeln) aufnimmt und einen String wie 'var1=value1&var2=value2'.

118
cnu

Bitte schön:

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

Verwendung:

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

funktional

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

Zabba hat in einem Kommentar zur aktuell akzeptierten Antwort einen Vorschlag gemacht, der für mich die beste Lösung darstellt: use jQuery.param () .

Wenn ich jQuery.param() für die Daten in der ursprünglichen Frage verwende, lautet der Code einfach:

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

Die Variable params wird sein

"var1=value&var2=value"

Kompliziertere Beispiele für Ein- und Ausgaben finden Sie in der Dokumentation jQuery.param () .

33
Kirby

RLSearchParams unterstützt zunehmend Browser.

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

const searchParams = new URLSearchParams(data);

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

Node.js bietet das Modul querystring an.

const querystring = require('querystring');

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

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'
29
Andrew Palmer

Dies sollte den Job 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
9
noego

Wir haben gerade arg.js veröffentlicht, ein Projekt, das dieses Problem ein für alle Mal lösen soll. Es war traditionell so schwierig, aber jetzt können Sie Folgendes tun:

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

Und das Lesen funktioniert:

var name = Arg("name");

oder das ganze Los bekommen:

var params = Arg.all();

und wenn Sie sich für den Unterschied zwischen ?query=true und #hash=true interessieren, können Sie die Methoden Arg.query() und Arg.hash() verwenden.

9
Mat Ryer

Wenn Sie Prototype verwenden, gibt es Form.serialize

Wenn Sie jQuery verwenden, gibt es Ajax/serialize

Ich kenne keine unabhängigen Funktionen, um dies zu erreichen, aber eine Google-Suche ergab einige vielversprechende Optionen, wenn Sie derzeit keine Bibliothek verwenden. Wenn Sie nicht sind, sollten Sie wirklich, weil sie der Himmel sind.

7

Ich möchte diese fast 10-jährige Frage noch einmal aufgreifen. In dieser Zeit der Standardprogrammierung ist es am besten, Ihr Projekt mit einem Abhängigkeitsmanager (npm) einzurichten. Es gibt eine ganze Heimindustrie von Bibliotheken, die Abfragezeichenfolgen codieren und sich um alle Edge-Fälle kümmern. Dies ist einer der beliebtesten -

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

6
pscl

ES2017 (ES8)

Verwenden Sie Object.entries() , das ein Array der [key, value] - Paare eines Objekts zurückgibt. Zum Beispiel würde es für {a: 1, b: 2}[['a', 1], ['b', 2]] Zurückgeben. Es wird nicht nur vom Internet Explorer unterstützt (und wird es auch nicht sein).

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"
6
Przemek

Eine kleine Modifikation von TypeScript:

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