Wie entkomme ich einer JSON-Zeichenfolge, um sie in einer URL zu haben?

Mit Javascript möchte ich einen Link zu einer Seite generieren. Die Parameter für die Seite befinden sich in einem Javascript-Array, das ich in JSON serialisiere.

Also möchte ich eine URL wie diese generieren:

http://example.com/?data="MY_JSON_ARRAY_HERE"

Wie muss ich meine JSON-Zeichenfolge (Array serialisiert) maskieren, um sie als Parameter in eine URL aufzunehmen?

Wenn es eine Lösung mit JQuery gibt, würde ich es lieben.

Hinweis: Ja, die Parameter für die Seite müssen sich in einem Array befinden, da es viele davon gibt. Ich denke, ich werde bit.ly verwenden, um die Links danach zu kürzen.

encodeURIComponent(JSON.stringify(object_to_be_serialised))

Sie können die encodeURIComponentsichere URL-Codierung von Teilen einer Abfragezeichenfolge verwenden:

var array = JSON.stringify([ 'foo', 'bar' ]);
var url = 'http://example.com/?data=' + encodeURIComponent(array);

oder wenn Sie dies als AJAX-Anfrage senden:

var array = JSON.stringify([ 'foo', 'bar' ]);
$.ajax({
    url: 'http://example.com/',
    type: 'GET',
    data: { data: array },
    success: function(result) {
        // process the results
    }
});

Ich wollte das Gleiche tun. Problem für mich war, dass meine URL viel zu lang wurde. Ich habe heute eine Lösung mit der Bibliothek jsUrl.js von Bruno Jouhier gefunden .

Ich habe es noch nicht sehr gründlich getestet. Hier ist jedoch ein Beispiel, das die Zeichenlängen der Zeichenfolgenausgabe zeigt, nachdem dasselbe große Objekt mit drei verschiedenen Methoden codiert wurde:

• 2651 Zeichen mit jQuery.param
• 1691 Zeichen mit JSON.stringify + encodeURIComponent
• 821 Zeichen mit JSURL.stringify

JSURL hat eindeutig das am besten optimierte Format für die URL-Codierung eines js-Objekts.

Der Thread unter https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q zeigt Benchmarks für das Codieren und Parsen.

Hinweis : Nach dem Testen sieht es so aus, als ob die Bibliothek jsurl.js ECMAScript 5-Funktionen wie Object.keys, Array.map und Array.filter verwendet. Daher funktioniert es nur in modernen Browsern (Nr. 8 und darunter). Es gibt jedoch Polyfills für diese Funktionen, die es mit mehr Browsern kompatibel machen würden.

• Für Array: https://stackoverflow.com/a/2790686/467286
• für object.keys: https://stackoverflow.com/a/3937321/467286

Verwenden von encodeURIComponent():

var url = 'index.php?data='+encodeURIComponent(JSON.stringify({"json":[{"j":"son"}]})),

Ich werde eine seltsame Alternative anbieten. Manchmal ist es einfacher, unterschiedliche Codierungen zu verwenden, insbesondere wenn Sie mit einer Vielzahl von Systemen arbeiten, die nicht alle Details der URL-Codierung auf dieselbe Weise verarbeiten. Dies ist nicht der gängigste Ansatz, kann jedoch in bestimmten Situationen nützlich sein.

Anstatt die Daten per URL zu codieren, können Sie sie mit base64 codieren. Dies hat den Vorteil, dass die codierten Daten sehr allgemein sind und nur aus Alpha-Zeichen und manchmal nachgestellten Zeichen bestehen =. Beispiel:

JSON-Array von Zeichenfolgen:

["option", "Fred's dog", "Bill & Trudy", "param=3"]

Diese Daten, URL-codiert als dataParameter:

"data=%5B%27option%27%2C+%22Fred%27s+dog%22%2C+%27Bill+%26+Trudy%27%2C+%27param%3D3%27%5D"

Gleiche, base64-codierte:

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

Der base64-Ansatz kann etwas kürzer sein, ist aber vor allem einfacher. Ich habe häufig Probleme beim Verschieben von URL-codierten Daten zwischen cURL, Webbrowsern und anderen Clients, normalerweise aufgrund von Anführungszeichen, eingebetteten %Zeichen usw. Base64 ist sehr neutral, da keine Sonderzeichen verwendet werden.

Die Antwort von Delan ist perfekt. Nur hinzufügen - falls jemand die Parameter benennen oder mehrere JSON-Zeichenfolgen separat übergeben möchte - könnte der folgende Code helfen!

JQuery

var valuesToPass = new Array(encodeURIComponent(VALUE_1), encodeURIComponent(VALUE_2), encodeURIComponent(VALUE_3), encodeURIComponent(VALUE_4));

data = {elements:JSON.stringify(valuesToPass)}

PHP

json_decode(urldecode($_POST('elements')));

Hoffe das hilft!