web-dev-qa-db-fra.com

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

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

Donc, je voudrais générer une URL comme ça:

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 existe une solution utilisant JQuery, j'adorerais.

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

javascriptjqueryjsonurlescaping
120
Matthieu Napoli
encodeURIComponent(JSON.stringify(object_to_be_serialised))
201
Delan Azabani

Je cherchais à faire la même chose. Le problème pour moi était que mon URL devenait beaucoup trop longue. J'ai trouvé une solution aujourd'hui en utilisant 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 sortie de chaîne après avoir codé le même objet de grande taille en utilisant 3 méthodes différentes:

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

jSURL a clairement le format le plus optimisé pour le codage d’URL d’un objet js.

le fil à l'emplacement https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q indique les points de repère pour le codage et l'analyse.

Remarque : après les tests, la bibliothèque jsurl.js utilise les 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, les polyfill pour ces fonctions le rendraient compatible avec plus de navigateurs.

18
jcj80

Vous pouvez utiliser le encodeURIComponent pour coder en toute sécurité par URL les 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 en tant que demande AJAX:

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

Utiliser encodeURIComponent():

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

Je vais offrir une alternative bizarre. Parfois, il est plus facile d’utiliser un codage différent, en particulier si vous utilisez 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 répandue mais peut être utile dans certaines situations.

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

Tableau de chaînes JSON:

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

Ces données, encodées en URL sous le paramètre data:

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

Idem, codé en base64:

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

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

5
Chris Johnson

La réponse donnée par Delan est parfaite. En y ajoutant simplement - si quelqu'un veut nommer les paramètres ou transmettre plusieurs chaînes JSON séparément - le code ci-dessous pourrait 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!

0
foxybagga