Wie erstelle ich Abfrageparameter in Javascript?

132

Gibt es eine Möglichkeit, die Abfrageparameter für eine GET-Anforderung in JavaScript zu erstellen ?

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

cnu
quelle

Antworten:

189

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);
Shog9
quelle
12
forVerwenden Sie beim Iterieren mit hasOwnProperty , um die Interoperabilität sicherzustellen.
Troelskn
3
@troelskn, guter Punkt ... obwohl in diesem Fall jemand Object.prototype erweitern müsste, um es zu brechen, was zunächst eine ziemlich schlechte Idee ist.
Shog9
1
@ Shog9 Warum ist es eine schlechte Idee?
Cesar Canassa
@Cesar, siehe: stackoverflow.com/questions/3832617/… **
Shog9
Nur ein kleines Detail, aber ret könnte const sein
Alkis Mavridis
84

URLSearchParams 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 Querystring- Modul an.

const querystring = require('querystring');

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

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'
Andrew Palmer
quelle
1
Auf jeden Fall der saubere und moderne Ansatz. Sie können auch später frei anrufensearchParams.append(otherData)
Kano
81

funktional

function encodeData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
}   
Manav
quelle
1
Schön! .map () wurde in JavaScript 1.6 implementiert, so dass fast alle Browser, auch die Omas, dies unterstützen. Aber wie Sie sich vorstellen können, außer IE nicht IE 9+. Aber keine Sorge, es gibt eine Problemumgehung. Quelle: developer.mozilla.org/en-US/docs/JavaScript/Reference/…
Akseli Palén
var data = { bloop1: true, bloop2: "something" }; var url = "https://something.com/?"; var params = encodeData(data); var finalUrl = url + params; // Is this the right use?Sollte produzieren https://www.something.com/?bloop1=true&bloop2=something?
Dylanh724
1
@ DylanHunt: Yup…
Przemek
38

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

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

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

Die Variable paramswird sein

"var1=value&var2=value"

Kompliziertere Beispiele, Ein- und Ausgaben finden Sie in der Dokumentation zu jQuery.param () .

Kirby
quelle
10

Wir haben gerade arg.js veröffentlicht , ein Projekt, das darauf abzielt, dieses Problem ein für alle Mal zu lösen. 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=trueund interessieren #hash=true, können Sie die Methoden Arg.query()und Arg.hash()verwenden.

Mat Ryer
quelle
9

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
noego
quelle
1
Ich habe später festgestellt, dass es sich tatsächlich um eine etwas andere Version der Antwort von @ manav handelt. Trotzdem könnte es für die ES6-Syntax immer noch vorzuziehen sein.
Noego
Zunächst codieren Sie die Schlüssel nicht. Auch sollten Sie encodeURIComponent()anstelle von verwenden encodeURI. Lesen Sie über den Unterschied .
Przemek
9

ES2017 (ES8)

Verwenden von Object.entries(), wodurch ein Array von Objektpaaren zurückgegeben [key, value]wird. Zum Beispiel {a: 1, b: 2}würde es zurückkehren [['a', 1], ['b', 2]]. Es wird nicht nur vom IE 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"
Przemek
quelle
8

Wenn Sie Prototype verwenden, gibt es Form.serialize

Wenn Sie jQuery verwenden, gibt es Ajax / serialize

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

Paolo Bergantino
quelle
5
jQuery.param () nimmt das Objekt und wandelt es in eine GET-Abfragezeichenfolge um (diese Funktion passt besser zur Frage).
Azurkin
5

Ich möchte diese fast 10 Jahre alte Frage noch einmal aufgreifen. In dieser Ära 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 Randfälle kümmern. Dies ist einer der beliebtesten -

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

pscl
quelle
Sehr unspezifische Antwort.
Masterxilo
2

Eine kleine Änderung am Typoskript:

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

Dieser Thread verweist auf Code zum Escapen von URLs in PHP. Es gibt escape()und unescape()welche werden den größten Teil der Arbeit erledigen, aber Sie müssen ein paar zusätzliche Dinge hinzufügen.

function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}

function urldecode(str) {
str = str.replace('+', ' ');
str = unescape(str);
return str;
}
Kibbee
quelle
3
encodeURIComponent behandelt dies und verwendet + nicht falsch für ein Leerzeichen.
AnthonyWJones