【问题标题】:Store JSON in a hidden input element?将 JSON 存储在隐藏的输入元素中?
【发布时间】:2011-03-09 21:10:30
【问题描述】:

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

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

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

有人对某种转义方法有任何建议吗?

【问题讨论】:

    标签: php html json hidden-field


    【解决方案1】:

    您可以使用此处介绍的转义功能:http://phpjs.org/functions/htmlspecialchars:426

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

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

    【讨论】:

    • 这正是我所需要的!我试图在 PHP 中使用 addlashes() 时走错了方向,但它们不会在 HTML 中转义引号。 :(
    • 谢谢。使用 htmlspecialchars() 引用您从 php 发送到 html 的内容时,您对 XSS 攻击最安全。
    【解决方案2】:

    您要做的是掌握一些 html5 数据-* 属性,以便您可以做到

    <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 来做

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

    很多大型网站都使用它,尤其是 Facebook

    【讨论】:

      【解决方案3】:

      base64_encode 数据或通过 htmlentities() 运行它以将引号转换为实体:)

      【讨论】:

        【解决方案4】:

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

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

        或者,如果您已经在使用 jQuery,请使用 val() 方法来设置(并获取?)该值 - 我相信它会为您解决这些问题(尽管我还没有实际检查过)。

        【讨论】:

        • 问题不在于 Javascript 中的设置,而是最初通过 PHP 将其放置在页面中。我知道有很多方法可以处理双引号,但不确定哪种方法最有效。虽然我最初并没有想到 htmlentities...我曾想过 addlashes,但斜杠不会转义 HTML 中的引号。 >.>
        猜你喜欢
        • 1970-01-01
        • 2011-03-27
        • 1970-01-01
        • 2013-09-19
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-08-08
        • 2021-01-17
        相关资源
        最近更新 更多