将JSON存储在HTML属性中的最佳方法是什么？ [英] Best way to store JSON in an HTML attribute?

问题描述

我需要将一个JSON对象放入HTML元素的一个属性中。 HTML不需要验证。

回答Quentin：将JSON存储在 data - * 属性中，是有效的HTML5。

JSON对象可以是任何大小 - 即巨大

由Maiku Mori回答：限制对于HTML属性，可能会有65536个字符。

如果JSON包含特殊字符，该怎么办？例如 {foo：'<bar />'}

已回答通过Quentin：在将JSON字符串放入属性之前，按照惯例进行编码。对于PHP，请使用 htmlentities（） 功能。

---

编辑 - 使用PHP和jQuery的示例解决方案 编写JSON进入HTML属性：

 <？php 
 $ data = array（
'1'= >'test'，
'foo'=>'<bar />'
）; 
 $ json = json_encode（$ data）; 
？> 
 
< a href =＃data-json =<？php echo htmlentities（$ json，ENT_QUOTES，'UTF-8'）;？>> CLICK ME<一个> 
  

使用jQuery检索JSON：

<$ p （）函数（）{

//读取属性的内容（返回一个字符串）
var data = $（'a' $（this）.data（'json'）;

//将字符串解析回适当的JSON对象
var json = $ .parseJSON（$（this）.data（' json'））;

// Object now available
console.log（json.foo）;

}）;


解决方案

必须验证。

为什么不呢？验证非常简单，QA可以捕捉很多错误。使用HTML 5 data - * 属性。

JSON对象可以是任何大小（即巨大）。

我还没有看到关于浏览器限制属性大小的任何文档。

如果您碰到它们，请将数据存储在< script> 中。定义一个对象并将元素 id s映射到该对象中的属性名称。

如果JSON包含特殊字符怎么办？ （例如{test：'<myString />'}）

只需遵循将不可信数据包含在属性值中的常规规则。使用& amp; 和& quot; （如果你用双引号包装属性值）或&＃x27; （如果你用单引号包装属性值）。

然而，这不是JSON（它要求属性名称是字符串和字符串只能用双引号分隔）。

I need to put a JSON object into an attribute on an HTML element.

1. The HTML does not have to validate.

   Answered by Quentin: Store the JSON in a data-* attribute, which is valid HTML5.

2. The JSON object could be any size - i.e. huge

   Answered by Maiku Mori: The limit for an HTML attribute is potentially 65536 characters.

3. What if the JSON contains special characters? e.g. {foo: '<"bar/>'}

   Answered by Quentin: Encode the JSON string before putting it into the attribute, as per the usual conventions. For PHP, use the htmlentities() function.

---

EDIT - Example solution using PHP and jQuery

Writing the JSON into the HTML attribute:

<?php
    $data = array(
        '1' => 'test',
        'foo' => '<"bar/>'
    );
    $json = json_encode($data);
?>

<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, 'UTF-8'); ?>">CLICK ME</a>

Retrieving the JSON using jQuery:

$('a').click(function() {

    // Read the contents of the attribute (returns a string)
    var data = $(this).data('json');

    // Parse the string back into a proper JSON object
    var json = $.parseJSON($(this).data('json'));

    // Object now available
    console.log(json.foo);

});

解决方案

The HTML does not have to validate.

Why not? Validation is really easy QA that catches lots of mistakes. Use an HTML 5 data-* attribute.

The JSON object could be any size (i.e. huge).

I've not seen any documentation on browser limits to attribute sizes.

If you do run into them, then store the data in a <script>. Define an object and map element ids to property names in that object.

What if the JSON contains special characters? (e.g. {test: '<"myString/>'})

Just follow the normal rules for including untrusted data in attribute values. Use & and " (if you’re wrapping the attribute value in double quotes) or ' (if you’re wrapping the attribute value in single quotes).

Note, however, that that is not JSON (which requires that property names be strings and strings be delimited only with double quotes).

这篇关于将JSON存储在HTML属性中的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！