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

Question

使用Javascript,我想生成一个页面的链接.页面的参数位于我在JSON中序列化的Javascript数组中.

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

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

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

如果有一个使用JQuery的解决方案,我会喜欢它.

注意:是的,页面的参数需要在一个数组中,因为它们有很多.我想我会用bit.ly来缩短之后的链接.

Answer 1

encodeURIComponent(JSON.stringify(object_to_be_serialised))

Answer 2

您可以使用encodeURIComponent安全URL编码查询字符串的部分:

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

或者如果您要将此作为AJAX请求发送:

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

Answer 3

我当时也想做同样的事情.对我来说问题是我的网址太长了.我今天找到了使用Bruno Jouhier的jsUrl.js库的解决方案.

我还没有彻底测试过它.但是,这是一个示例,显示使用3种不同方法对相同大对象进行编码后字符串输出的字符长度:

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

显然,JSURL具有urlEncoding js对象的最优化格式.

https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q上的主题 显示了编码和解析的基准.

注意:经过测试,看起来jsurl.js库使用ECMAScript 5函数,如Object.keys,Array.map和Array.filter.因此,它只适用于现代浏览器(不包括8及以下).但是,这些功能的polyfill会使它与更多的浏览器兼容.

• 对于阵列:https://stackoverflow.com/a/2790686/467286
• 对于object.keys:https://stackoverflow.com/a/3937321/467286

Answer 4

使用encodeURIComponent():

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

Answer 5

我将提供一个替代方案。有时使用不同的编码会更容易，尤其是当您处理的系统不能完全以相同的方式处理URL编码的细节时，尤其如此。这不是最主流的方法，但是在某些情况下可以派上用场。

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

JSON字符串数组：

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

将该数据编码为data参数的URL ：

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

相同，以base64编码：

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

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