Como escapar uma string JSON para tê-la em uma URL?

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

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

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

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

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

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

encodeURIComponent(JSON.stringify(object_to_be_serialised))

Você pode usar o encodeURIComponentURL para codificar com segurança partes de uma sequência de caracteres de consulta:

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

ou se você estiver enviando isso como uma solicitação 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 olhando para fazer a mesma coisa. O problema para mim era que meu URL estava ficando muito longo. Encontrei uma solução hoje usando a biblioteca jsUrl.js de Bruno Jouhier .

Ainda não o testei completamente. No entanto, aqui está um exemplo que mostra os comprimentos de caracteres da saída da string depois de codificar o mesmo objeto grande usando 3 métodos 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 objeto js.

o segmento em https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q mostra parâmetros de referência para codificação e análise.

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

• para matriz: https://stackoverflow.com/a/2790686/467286
• para object.keys: https://stackoverflow.com/a/3937321/467286

Usando encodeURIComponent():

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

Vou oferecer uma alternativa esquisita. Às vezes, é mais fácil usar codificação diferente, especialmente se você estiver lidando com uma variedade de sistemas que nem todos lidam com os detalhes da codificação de URL da mesma maneira. Essa não é a abordagem mais comum, mas pode ser útil em determinadas situações.

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

Matriz de strings JSON:

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

Esses dados, codificados em URL como o dataparâmetro:

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

O mesmo, codificado em base64:

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

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

A 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!