将 JSON 存储在隐藏的输入元素中？

Question

我需要能够有效地生成无限数量的数据集，所以我想做的是这样的；

<input type="hidden" name="items[]" value="{id:1,name:'some-name'}" />

我尝试 JSON.stringify 在 javascript 中转换我的数组并将其存储在当前隐藏的输入元素中，但它将所有键和值都用双引号括起来，这显然与 HTML 将整个值用双引号括起来相冲突。不知何故，我需要转义引号，但我需要它以两种方式工作...基本上这些元素是用 PHP 生成的并按顺序放置在页面中，然后我可以在用户端添加或删除项目并提交页面， PHP 应该迭代这些隐藏元素并更新记录。

有人对某种转义方法有什么建议吗？

Answer 1

您可以使用此处提供的转义函数： http://phpjs.org/functions/htmlspecialchars:426

它应该转义 json 中的字符，并使您的字符串可以安全地用作 html 属性的值。

如果你想在 PHP 上进行转义，那么你应该使用 PHP 中内置的函数 htmlspecialchars() 。

Answer 2

你想要做的是掌握一些 html5 data-* 属性，这样你就可以做到

<div id="post-container" data-meta="{id:22,name:'Robert Pitt'}">
   ..
</div>

然后你可以使用 htmlentites() 来使字符串安全并使用 javascript，你可以使用 javascript 获取数据，如下所示：

function ElementJson(id,attrib)
{
    var post_c = document.getElementById(id);

    for( var x = 0; x < post_c.attributes.length; x++)
    {
        if( post_c.attributes[x].nodeName.toLowerCase() == 'data-' + attrib.toLowerCase())
        {
            return post_c.attributes[x].nodeValue;
        }
    }
    return false;
}
json = ElementJson('post-container','meta');

例如通过 jQuery 你可以 都使用它，尤其是 Facebook

json = $('#post-container[data-meta]').attr('data-meta');

许多大型网站

Answer 3

对数据进行 base64 编码或通过 htmlentities() 运行它以将引号转换为实体:)

Answer 4

老实说，如果您在页面中的 javascript 中设置值，那么我对您遇到的问题感到有点惊讶，但这里有一些建议： -

当然，正确的做法是HTML 对 html 属性中的数据进行编码 - 但这需要调用 htmlentities 或类似的方法，所以为什么不使用“内置”javascript encode 和 decode 对数据进行 URL 编码方法。 URL 编码应将双引号转义为“%22”。

或者，如果您已经在使用 jQuery，请使用 val() 方法来设置（并获取？）该值 - 我相信这会为您解决这些问题（尽管我还没有去，实际上检查了这个）。