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

129

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

Поэтому я хотел бы создать такой URL-адрес:

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

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

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

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

Матье Наполи
источник
См. Также stackoverflow.com/questions/21802866/…
w00t 09

Ответы:

210
encodeURIComponent(JSON.stringify(object_to_be_serialised))
Делан Азабани
источник
10
Однако кажется, что он кодирует больше символов, чем необходимо (когда я вставляю ссылку в Firefox, некоторые символы возвращаются обратно (т.е. {["). Есть ли способ кодировать только необходимые символы, чтобы я мог сократить свои URL-адреса?
Матье Наполи
19

Вы можете использовать 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
    }
});
Дарин Димитров
источник
19

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

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

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

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

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

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

jcj80
источник
Начиная с версии 0.1.4 он также совместим с IE 6-8, если они вам все еще нужны.
Стоффе
8

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

var url = 'index.php?data='+encodeURIComponent(JSON.stringify({"json":[{"j":"son"}]})),
генезис
источник
5

Я предложу необычную альтернативу. Иногда проще использовать другую кодировку, особенно если вы имеете дело с множеством систем, которые не все обрабатывают детали кодирования 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 очень нейтрален, потому что не использует специальные символы.

Крис Джонсон
источник
наконец-то нашел здесь адрес (% 26) моего друга (&)
Прадип Кумар Прабахаран
проблема со строками base64 заключается в том, что они могут содержать символ косой черты (/), что делает URL-адрес недействительным ...
ingbabic
Это правда , но вы можете выбрать символы для использования в base64: заменить /с $, _или любой другой символ , который не требует кодирования URL - адрес каждого RFC 3986.
Крис Джонсон
0

Ответ Делана идеален. Просто добавьте к нему - на случай, если кто-то захочет назвать параметры или передать несколько строк 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')));

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

foxybagga
источник
Нет необходимости использовать urldecode () данные, которые поступают в PHP $ _POST или любые другие (GET, REQEST и т. Д.). В зависимости от того, что вы делаете с этого
Тит Петрик,