关于javascript：如何转义JSON字符串以将其包含在URL中？


How to escape a JSON string to have it in a URL?

使用javascript，我想生成一个指向页面的链接。页面的参数位于我在JSON中序列化的javascript数组中。

所以我想生成一个这样的URL：

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

我需要如何转义JSON字符串(数组序列化)以将其作为参数包含在URL中？

如果有使用jquery的解决方案，我会喜欢的。

注意：是的，页面的参数需要在一个数组中，因为其中有很多参数。我想以后我会用bit.ly来缩短链接。

相关讨论

1
encodeURIComponent(JSON.stringify(object_to_be_serialised))
相关讨论

我想做同样的事情。我的问题是我的网址太长了。我今天使用BrunoJouhier的jsurl.js库找到了一个解决方案。

我还没有彻底测试过。但是，下面是一个示例，显示了使用3种不同方法对同一大型对象编码后字符串输出的字符长度：

  • 使用jQuery.param的2651个字符
  • 1691个字符，使用JSON.stringify + encodeURIComponent
  • 821个字符使用JSURL.stringify

显然，JSURL具有最适合于对JS对象进行URLENCODING的优化格式。

位于https://groups.google.com/forum/的线程？从组=主题/nodejs/ivdzugcf86q显示编码和解析的基准。

注意：在测试之后，jsURL.js库似乎使用了ecmascript 5函数，如object.keys、array.map和array.filter。因此，它只能在现代浏览器(没有IE8或更低版本)上工作。但是，这些函数的polyfill将使其与更多的浏览器兼容。

  • 数组：https://stackoverflow.com/a/2790686/467286
  • 对于object.keys:https://stackoverflow.com/a/3937321/467286
相关讨论

您可以使用encodeURIComponent安全地对查询字符串的部分进行url编码：

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

或者，如果您将此作为Ajax请求发送：

1
2
3
4
5
6
7
8
9
var array = JSON.stringify([ 'foo', 'bar' ]);
$.ajax({
    url: 'http://example.com/',
    type: 'GET',
    data: { data: array },
    success: function(result) {
        // process the results
    }
});

使用encodeURIComponent()：

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

我会提供一个奇怪的选择。有时使用不同的编码更容易，尤其是当您处理的各种系统并非都以相同的方式处理URL编码的细节时。这不是最主流的方法，但在某些情况下可以派上用场。

您可以对数据进行base64编码，而不是URL编码。这样做的好处是，编码的数据非常通用，只包含字母字符，有时还跟踪=。示例：

JSON字符串数组：

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

该数据，url编码为data参数：

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

相同，base64编码：

1
"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

base64方法可以稍微短一点，但更重要的是它更简单。我经常在curl、web浏览器和其他客户机之间移动url编码的数据时遇到问题，通常是由于引号、嵌入的%符号等原因。base64非常中性，因为它不使用特殊字符。

相关讨论

德兰给出的答案是完美的。只需添加到其中—如果有人想分别命名参数或传递多个JSON字符串—下面的代码可能会有所帮助！

JQuery

1
2
3
var valuesToPass = new Array(encodeURIComponent(VALUE_1), encodeURIComponent(VALUE_2), encodeURIComponent(VALUE_3), encodeURIComponent(VALUE_4));

data = {elements:JSON.stringify(valuesToPass)}

PHP

1
json_decode(urldecode($_POST('elements')));

希望这有帮助！

相关讨论