Jak uciec przed ciągiem JSON, aby mieć go w adresie URL?

Chcę wygenerować link do strony za pomocą Javascript. Parametry strony znajdują się w tablicy JavaScript, którą serializuję w formacie JSON.

Chciałbym więc wygenerować taki adres URL:

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

Jak muszę zmienić znaczenie mojego ciągu JSON (serializacji tablicy), aby uwzględnić go jako parametr w adresie URL?

Jeśli istnieje rozwiązanie korzystające z JQuery, bardzo bym je chciał.

Uwaga: tak, parametry strony muszą znajdować się w tablicy, ponieważ jest ich dużo. Myślę, że później użyję bit.ly, aby skrócić linki.

encodeURIComponent(JSON.stringify(object_to_be_serialised))

Możesz użyć, encodeURIComponentaby bezpiecznie zakodować URL części ciągu zapytania:

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

lub jeśli wysyłasz to jako żądanie AJAX:

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

Chciałem zrobić to samo. Problem polegał na tym, że mój adres URL stawał się zbyt długi. Znalazłem rozwiązanie dzisiaj, korzystając z biblioteki jsUrl.js Bruno Jouhiera .

Nie przetestowałem tego jeszcze dokładnie. Jednak tutaj jest przykład pokazujący długość znaków ciągu wyjściowego po zakodowaniu tego samego dużego obiektu przy użyciu 3 różnych metod:

• 2651 znaków przy użyciu jQuery.param
• 1691 znaków przy użyciu JSON.stringify + encodeURIComponent
• 821 znaków przy użyciu JSURL.stringify

Oczywiście JSURL ma najbardziej zoptymalizowany format do urlEncoding obiektu js.

wątek pod adresem https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q przedstawia testy wzorcowe dotyczące kodowania i analizowania.

Uwaga : po przetestowaniu wygląda na to, że biblioteka jsurl.js używa funkcji ECMAScript 5, takich jak Object.keys, Array.map i Array.filter. Dlatego będzie działać tylko w nowoczesnych przeglądarkach (np. 8 i poniżej). Jednak są polyfills dla tych funkcji, które uczyniłyby go kompatybilnym z większą liczbą przeglądarek.

• dla tablicy: https://stackoverflow.com/a/2790686/467286
• dla object.keys: https://stackoverflow.com/a/3937321/467286

Używając encodeURIComponent():

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

Zaproponuję dziwaczną alternatywę. Czasami łatwiej jest użyć innego kodowania, zwłaszcza jeśli masz do czynienia z różnymi systemami, które nie wszystkie obsługują szczegóły kodowania adresów URL w ten sam sposób. Nie jest to najbardziej popularne podejście, ale może się przydać w pewnych sytuacjach.

Zamiast kodować dane w postaci adresu URL, możesz je zakodować w formacie base64. Zaletą tego jest to, że zakodowane dane są bardzo ogólne, składające się tylko ze znaków alfanumerycznych, a czasem końcowych =. Przykład:

Tablica ciągów JSON:

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

Te dane zakodowane w adresie URL jako dataparametr:

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

To samo, zakodowane w base64:

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

Podejście base64 może być nieco krótsze, ale co ważniejsze, jest prostsze. Często mam problemy z przenoszeniem danych zakodowanych w adresie URL między cURL, przeglądarkami internetowymi i innymi klientami, zwykle z powodu cudzysłowów, osadzonych %znaków i tak dalej. Base64 jest bardzo neutralny, ponieważ nie używa znaków specjalnych.

Odpowiedź udzielona przez Delan jest doskonała. Wystarczy dodać do tego - na wypadek, gdyby ktoś chciał nazwać parametry lub osobno przekazać wiele ciągów JSON - poniższy kod może pomóc!

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')));

Mam nadzieję że to pomoże!