javascript - Hur man undviker en JSON-sträng för att ha den i en URL?

Med Javascript vill jag generera en länk till en sida. Parametrarna till sidan finns i en Javascript-array som jag serialiserar i JSON.

Så jag skulle vilja generera en URL som den här:

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

Hur behöver jag escapea min JSON-sträng (seriealiserad array) för att inkludera den som en parameter i en URL?

Om det finns en lösning med JQuery skulle jag älska det.

Obs: Ja, parametrarna till sidan måste vara i en array eftersom det finns många av dem. Jag tror att jag kommer att använda bit.ly för att förkorta länkarna efteråt.

Svar #1

encodeURIComponent(JSON.stringify(object_to_be_serialised))

Svar #2

Jag letade efter att göra samma sak. Problemet för mig var att min URL blev alldeles för lång. Jag hittade en lösning idag med Bruno Jouhiers jsUrl.js-bibliotek.

Jag har inte testat det särskilt noggrant än. Här är dock ett exempel som visar teckenlängderna på strängutgången efter att ha kodats samma stora objekt med 3 olika metoder:

2651 tecken med jQuery.param
1691 tecken med JSON.stringify + encodeURIComponent
821 tecken med JSURL.stringify

klart har JSURL det mest optimerade formatet för urlEncoding av ett js-objekt.

tråden på https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q visar prestandamätningar för kodning och analys.

Notera: Efter testning verkar det som att jsurl.js-biblioteket använder ECMAScript 5-funktioner såsom Object.keys, Array.map och Array.filter. Därför kommer det endast att fungera i moderna webbläsare (ingen IE 8 och tidigare). Det finns dock polyfills för dessa funktioner som skulle göra det kompatibelt med fler webbläsare.

för array: https://stackoverflow.com/a/2790686/467286
för object.keys: https://stackoverflow.com/a/3937321/467286

Svar #3

Du kan använda encodeURIComponent för att säkert URL-koda delar av en frågesträng:

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

eller om du skickar detta som en AJAX-förfrågan:

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

Svar #4

Jag kommer att erbjuda ett alternativ. Ibland är det lättare att använda en helt annan kodning, särskilt om du hanterar olika system som inte alla hanterar detaljerna för URL-kodning på samma sätt.

Istället för att URL-koda datan kan du base64-koda den. Fördelen med detta är att den kodade datan är mycket generell, bestående endast av alfabetiska tecken och ibland avslutande =-tecken. Exempel:

JSON-array av strängar:

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

De uppgifterna, URL-kodade som data-parametern:

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

Samma, base64-kodat:

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

Base64-metoden kan vara något kortare, men ännu viktigare är att den är enklare. Jag har ofta problem med att flytta URL-kodad data mellan cURL, webbläsare och andra klienter, vanligtvis på grund av citattecken, inbäddade %-tecken, skalutvidgning av jokertecken och så vidare. Base64 är mycket neutralt och mycket portabelt eftersom det inte finns några specialtecken i dess output.

Många system använder detta tillvägagångssätt. Till exempel i Kubernetes-ekosystemet representerar kubectl edit secret alla hemligheter i base64 för att undvika kodningsproblem och för att göra icke-utskrivbara binära data enkla att kopiera och klistra in.

Svar #5

Använder encodeURIComponent():