Como escaping uma string JSON para tê-lo em um URL?

Usando Javascript, quero gerar um link para uma página. Os parâmetros para a página estão em uma matriz de Javascript que eu serializo em JSON.

Então, eu gostaria de gerar um URL assim:

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

Como eu preciso escaping minha string JSON (matriz serializada) para incluí-la como um parâmetro em uma URL?

Se houver uma solução usando o JQuery, eu adoraria.

Nota: Sim, os parâmetros para a página precisam estar em uma matriz porque há muitos deles. Acho que vou usar bit.ly para encurtar os links depois.

 encodeURIComponent(JSON.stringify(object_to_be_serialised)) 

Você pode usar o encodeURIComponent para codificar com segurança as partes de uma string de consulta:

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

ou se você estiver enviando isso como um pedido AJAX:

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

Eu estava procurando fazer a mesma coisa. problema para mim foi meu URL estava ficando muito longo. Eu encontrei uma solução hoje usando a biblioteca jsUrl.js de Bruno Jouhier .

Eu não testei muito bem ainda. No entanto, aqui está um exemplo mostrando os comprimentos de caractere da saída da cadeia depois de codificar o mesmo object grande usando três methods diferentes:

  • 2651 caracteres usando jQuery.param
  • 1691 caracteres usando JSON.stringify + encodeURIComponent
  • 821 caracteres usando JSURL.stringify

claramente JSURL tem o formato mais otimizado para urlEncoding um object js.

o tópico em https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q mostra os padrões de referência para codificação e análise.

Nota : Após o teste, parece que a biblioteca jsurl.js usa as funções do ECMAScript 5, como Object.keys, Array.map e Array.filter. Portanto, ele só funcionará em navegadores modernos (sem 8 ou menos). No entanto, são polyfills para essas funções que o tornariam compatível com mais navegadores.

Usando encodeURIComponent() :

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

Eu vou oferecer uma alternativa excêntrica. Às vezes é mais fácil usar uma codificação diferente, especialmente se você estiver lidando com uma variedade de sistemas que não lidam com os detalhes da codificação de URL da mesma maneira. Esta não é a abordagem mais convencional, mas pode ser útil em certas situações.

Em vez de codificar por URL os dados, você pode codificá-los na base64. O benefício disso é que os dados codificados são muito genéricos, consistindo apenas de caracteres alfabéticos e, às vezes, de trailing = . Exemplo:

Matriz de strings JSON:

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

Esses dados, codificados por URL como o parâmetro de data :

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

Idem, codificado em base64:

 "data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd" 

A abordagem base64 pode ser um pouco mais curta, mas mais importante é mais simples. Muitas vezes, tenho problemas ao mover dados codificados em URL entre cURL, navegadores da web e outros clientes, geralmente devido a cotações, sinais % incorporados e assim por diante. Base64 é muito neutro porque não usa caracteres especiais.

Resposta dada por Delan é perfeita. Apenas adicionando a ele – caso alguém queira nomear os parâmetros ou passar várias strings JSON separadamente – o código abaixo pode ajudar!

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

Espero que isto ajude!