Comment échapper à une chaîne JSON pour l'avoir dans une URL?

En utilisant Javascript, je souhaite générer un lien vers une page. Les paramètres de la page sont dans un tableau Javascript que je sérialise en JSON.

Je voudrais donc générer une URL comme celle-ci:

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

Comment dois-je échapper à ma chaîne JSON (tableau sérialisé) pour l'inclure en tant que paramètre dans une URL?

S'il y a une solution utilisant JQuery, je l'adorerais.

Remarque: Oui, les paramètres de la page doivent être dans un tableau car ils sont nombreux. Je pense que je vais utiliser bit.ly pour raccourcir les liens par la suite.

encodeURIComponent(JSON.stringify(object_to_be_serialised))

Vous pouvez utiliser l' encodeURIComponentURL pour encoder en toute sécurité des parties d'une chaîne de requête:

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

ou si vous envoyez ceci comme une requête AJAX:

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

Je cherchais à faire la même chose. Le problème pour moi était que mon URL devenait beaucoup trop longue. J'ai trouvé aujourd'hui une solution en utilisant la bibliothèque jsUrl.js de Bruno Jouhier .

Je ne l'ai pas encore testé de manière approfondie. Cependant, voici un exemple montrant les longueurs de caractères de la chaîne de sortie après avoir encodé le même gros objet en utilisant 3 méthodes différentes:

• 2651 caractères avec jQuery.param
• 1691 caractères avec JSON.stringify + encodeURIComponent
• 821 caractères avec JSURL.stringify

clairement JSURL a le format le plus optimisé pour urlEncoding un objet js.

le fil de discussion à l' adresse https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q montre des repères pour l'encodage et l'analyse.

Remarque : après les tests, il semble que la bibliothèque jsurl.js utilise des fonctions ECMAScript 5 telles que Object.keys, Array.map et Array.filter. Par conséquent, cela ne fonctionnera que sur les navigateurs modernes (pas de 8 et moins). Cependant, il existe des polyfills pour ces fonctions qui le rendraient compatible avec plus de navigateurs.

• pour la baie: https://stackoverflow.com/a/2790686/467286
• pour object.keys: https://stackoverflow.com/a/3937321/467286

Utilisation encodeURIComponent():

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

Je vais offrir une alternative bizarre. Parfois, il est plus facile d'utiliser un codage différent, surtout si vous avez affaire à une variété de systèmes qui ne gèrent pas tous les détails du codage d'URL de la même manière. Ce n'est pas l'approche la plus courante, mais peut être utile dans certaines situations.

Plutôt que d'encoder les données par URL, vous pouvez les encoder en base64. L 'avantage de ceci est que les données encodées sont très génériques, constituées uniquement de caractères alpha et parfois de fin =. Exemple:

Tableau de chaînes JSON:

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

Ces données, encodées en URL en tant que dataparamètre:

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

Idem, encodé en base64:

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

L'approche base64 peut être un peu plus courte, mais plus important encore, elle est plus simple. J'ai souvent des problèmes pour déplacer des données encodées en URL entre cURL, les navigateurs Web et d'autres clients, généralement en raison de citations, de %signes intégrés , etc. Base64 est très neutre car il n'utilise pas de caractères spéciaux.

La réponse donnée par Delan est parfaite. Il suffit d'ajouter - au cas où quelqu'un voudrait nommer les paramètres ou passer plusieurs chaînes JSON séparément - le code ci-dessous pourrait vous aider!

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

J'espère que cela t'aides!