Как избежать JSON-строки, чтобы она была в URL? - PullRequest
Новая
       1

Как избежать JSON-строки, чтобы она была в URL?

118 голосов
/ 24 июля 2011

Используя Javascript, я хочу создать ссылку на страницу. Параметры на странице находятся в массиве Javascript, который я сериализую в JSON.

Итак, я хотел бы сгенерировать такой URL: 

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

Как мне нужно экранировать строку JSON (сериализованный массив), чтобы включить ее в качестве параметра в URL?

Если есть решение с использованием JQuery, я бы с удовольствием.

Примечание: Да, параметры страницы должны быть в массиве, потому что их много. Я думаю, что я буду использовать bit.ly, чтобы потом сократить ссылки.

Ответы [ 6 ]

199 голосов
/ 24 июля 2011 
encodeURIComponent(JSON.stringify(object_to_be_serialised))
18 голосов
/ 19 марта 2013

Я хотел сделать то же самое.проблема для меня была в том, что мой URL становился слишком длинным.Сегодня я нашел решение, используя библиотеку Бруно Джухьера jsUrl.js .

. Я еще не очень тщательно его протестировал.Тем не менее, вот пример, показывающий длину символов строки, выводимой после кодирования одного и того же большого объекта с использованием 3 различных методов:

  • 2651 символов с использованием jQuery.param
  • 1691 символов с использованием JSON.stringify + encodeURIComponent
  • 821 символов с использованием JSURL.stringify

, очевидно, JSURL имеет наиболее оптимизированный формат для url-кодирования объекта js.

поток в https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Qпоказывает тесты для кодирования и анализа.

Примечание : После тестирования похоже, что библиотека jsurl.js использует функции ECMAScript 5, такие как Object.keys, Array.map и Array.filter.Таким образом, он будет работать только в современных браузерах (нет 8 и ниже).Однако для этих функций есть полифилы, которые делают его совместимым с большим количеством браузеров.

18 голосов
/ 24 июля 2011

Вы можете использовать encodeURIComponent для безопасного URL-кодирования частей строки запроса: 

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

или если вы отправляете это как запрос AJAX: 

var array = JSON.stringify([ 'foo', 'bar' ]);
$.ajax({
    url: 'http://example.com/',
    type: 'GET',
    data: { data: array },
    success: function(result) {
        // process the results
    }
});
8 голосов
/ 24 июля 2011

Использование encodeURIComponent(): 

var url = 'index.php?data='+encodeURIComponent(JSON.stringify({"json":[{"j":"son"}]})),
4 голосов
/ 01 декабря 2017

Я предложу странную альтернативу.Иногда проще использовать другую кодировку, особенно если вы имеете дело с различными системами, которые не все обрабатывают детали кодирования URL одинаково.Это не самый распространенный подход, но он может пригодиться в определенных ситуациях.

Вместо того, чтобы кодировать данные URL, вы можете кодировать их с помощью base64.Преимущество этого заключается в том, что закодированные данные являются очень общими, состоящими только из буквенных символов и иногда заканчивающихся =.Пример:

массив строк JSON: 

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

Эти данные, закодированные в виде URL-адреса как data: 

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

То же, base64-закодировано: 

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

Подход base64 может быть немного короче, но что более важно, он проще.У меня часто возникают проблемы при перемещении данных в кодировке URL между cURL, веб-браузерами и другими клиентами, как правило, из-за кавычек, встроенных знаков % и так далее.Base64 очень нейтрален, потому что не использует специальные символы.

0 голосов
/ 30 ноября 2012

Ответ, данный Деланом, совершенен. Просто добавьте к этому - если кто-то хочет назвать параметры или передать несколько строк JSON отдельно - приведенный ниже код может помочь!

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

Надеюсь, это поможет!

...