将JSON对象存储在HTML jQuery中的data属性中-Java 学习之路

109

我使用 data- 方法在HTML标记中存储数据，如下所示：

<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td>

然后我在回调中检索数据，如下所示：

$(this).data('imagename');

这很好 . 我坚持的是试图保存对象而不仅仅是其中一个属性 . 我试着这样做：

<td><button class='delete' data-image='"+results[i]+"'>Delete</button></td>

然后我尝试访问name属性，如下所示：

var imageObj = $(this).data('image');
console.log('Image name: '+imageObj.name);

日志告诉我 undefined . 所以我似乎可以在 data- 属性中存储简单的字符串，但我无法存储JSON对象......

我也试过使用这个语法孩子没有运气：

<div data-foobar='{"foo":"bar"}'></div>

有关如何使用 data- 方法在HTML标记中存储实际对象的任何想法？

12 回答

19
而不是将其嵌入文本中只需使用 $('#myElement').data('key',jsonObject);

它实际上不会存储在html中，但是如果你使用的是jquery.data，那么所有这些都是抽象的 .

要获取JSON don't parse it ，只需调用：
```
var getBackMyJSON = $('#myElement').data('key');
```
如果你得到 [Object Object] 而不是直接JSON，只需通过数据键访问你的JSON：
```
var getBackMyJSON = $('#myElement').data('key').key;
```
回复于 2024-05-13T20:38:35+08:00
5
实际上，你的最后一个例子：
```
<div data-foobar='{"foo":"bar"}'></div>
```
似乎运作良好（见http://jsfiddle.net/GlauberRocha/Q6kKU/） .

好处是data-属性中的字符串会自动转换为JavaScript对象 . 相反，我认为这种方法没有任何缺点！一个属性足以存储整个数据集，可以通过对象属性在JavaScript中使用 .

（注意：对于自动赋予Object类型而不是String类型的数据属性，您必须小心编写有效的JSON，特别是将键名括在双引号中） .
回复于 2024-05-13T20:38:35+08:00

这就是它对我有用的方式 .

Object

var my_object ={"Super Hero":["Iron Man", "Super Man"]};

Set

使用encodeURIComponent()对字符串化对象进行编码并设置为属性：

var data_str = encodeURIComponent(JSON.stringify(my_object));
$("div#mydiv").attr("data-hero",data-str);

Get

要将值作为对象获取，请使用decodeURIComponent()属性值解析已解码的值：

var data_str = $("div#mydiv").attr("data-hero");
var my_object = JSON.parse(decodeURIComponent(data_str));

回复于 2024-05-13T20:38:35+08:00

对我来说，就像那样工作，因为 I need to store it in template ......

// Generate HTML
var gridHtml = '<div data-dataObj=\''+JSON.stringify(dataObj).replace(/'/g, "\\'");+'\'></div>';

// Later
var dataObj = $('div').data('dataObj'); // jQuery automatically unescape it

回复于 2024-05-13T20:38:35+08:00

0
存储序列化数据的许多问题可以通过将serialized string转换为base64来解决 .

可以在几乎任何地方接受base64字符串而不用担心 .

看一眼：
- btoa()
WindowOrWorkerGlobalScope.btoa（）方法从String对象创建base-64编码的ASCII字符串，其中字符串中的每个字符都被视为二进制数据的字节 .
- atob()
WindowOrWorkerGlobalScope.atob（）函数解码使用base-64编码编码的数据字符串 .

根据需要转换为/从 .
回复于 2024-05-13T20:38:35+08:00
0
我的诀窍是 add double quotes around keys and values . 如果你使用像json_encode这样的php函数会给你一个json编码的字符串，并想知道如何对你的编码进行编码 .

如果字符串被正确编码为json， jQuery('#elm-id').data('datakey') 将返回字符串的对象 .

根据jQuery文档：（http://api.jquery.com/jquery.parsejson/）

Passing in a malformed JSON string results in a JavaScript exception being thrown. For example, the following are all invalid JSON strings:
- "{test: 1}" （测试周围没有双引号） .
- "{'test': 1}" （'test'使用单引号而不是双引号） .
- "'test'" （'test'使用单引号而不是双引号） .
- ".1" （数字必须以数字开头; "0.1"有效） .
- "undefined" （undefined不能用JSON字符串表示;但是，null可以） .
- "NaN" （NaN不能用JSON字符串表示; Infinity的直接表示也是n
回复于 2024-05-13T20:38:35+08:00
0
使用documented jquery .data(obj) syntax允许您在DOM元素上存储对象 . 检查元素不会显示 data- 属性，因为没有为对象的值指定键 . 但是，对象中的数据可以通过 .data("foo") 键引用，也可以使用 .data() 返回整个对象 .

所以假设你设置一个循环和 result[i] = { name: "image_name" } ：
```
$('.delete')[i].data(results[i]); // => <button class="delete">Delete</delete>
$('.delete')[i].data('name'); // => "image_name"
$('.delete')[i].data(); // => { name: "image_name" }
```
回复于 2024-05-13T20:38:35+08:00
114
出于某种原因，只有在页面上使用一次时，接受的答案对我有用，但在我的情况下，我试图在页面上的许多元素上保存数据，并且除了第一个元素之外，数据在某种程度上都丢失了 .

作为替代方案，我最终将数据写入dom并在需要时将其解析回来 . 也许它的效率较低，但是为了我的目的而工作得很好，因为我真的是数据原型，而不是为生产环境而写 .

要保存我使用的数据：
```
$('#myElement').attr('data-key', JSON.stringify(jsonObject));
```
然后读回数据与接受的答案相同，即：
```
var getBackMyJSON = $('#myElement').data('key');
```
如果我使用Chrome的调试器检查元素，这样做也会使数据显示在dom中 .
回复于 2024-05-13T20:38:35+08:00

.data() 完美无缺对于大多数情况 . 我遇到问题的唯一一次是JSON字符串本身只有一个引号 . 我找不到任何简单的方法来解决这个问题（使用Coldfusion作为服务器语言）：

<!DOCTYPE html>
        <html>
            <head>
                <title>
                    Special Chars in Data Attribute
                </title>
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
                <script>
                    $(function(){
                        var o = $("##xxx");
                        /**
                            1. get the data attribute as a string using attr()
                            2. unescape
                            3. convert unescaped string back to object
                            4. set the original data attribute to future calls get it as JSON.
                        */
                        o.data("xxx",jQuery.parseJSON(unescape(o.attr("data-xxx"))));
                        console.log(o.data("xxx")); // this is JSON object.
                    });
                </script>
                <title>
                    Title of the document
                </title>
            </head>
            <body>
                <cfset str = {name:"o'reilly's stuff",code:1}>
<!-- urlencode is a CF function to UTF8 the string, serializeJSON converts object to strin -->
                <div id="xxx" data-xxx='#urlencodedformat(serializejson(str))#'>
                </div>
            </body>
        </html>

回复于 2024-05-13T20:38:35+08:00

124
为了记录，我发现以下代码有效 . 它使您能够从数据标记中检索数组，推送新元素，并以正确的JSON格式将其存储在数据标记中 . 因此，如果需要，可以再次使用相同的代码将更多元素添加到数组中 . 我发现 $('#my-data-div').attr('data-namesarray', names_string); 正确存储了数组，但 $('#my-data-div').data('namesarray', names_string); 不起作用 .
```
<div id="my-data-div" data-namesarray='[]'></div>

var names_array = $('#my-data-div').data('namesarray');
names_array.push("Baz Smith");
var names_string = JSON.stringify(names_array);
$('#my-data-div').attr('data-namesarray', names_string);
```
回复于 2024-05-13T20:38:35+08:00

!DOCTYPE html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("#btn1").click(function()
{
person = new Object();
person.name = "vishal";
person.age =20;
    $("div").data(person);
});
  $("#btn2").click(function()
{
    alert($("div").data("name"));
});

}）;

</script>
<body>
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
<div></div>
</body>


</html>

Anser:-Attach data to selected elements using an object with name/value pairs.
GET value using object propetis like name,age etc...

回复于 2024-05-13T20:38:35+08:00

这段代码对我来说很好 .

用btoa编码数据

let data_str = btoa(JSON.stringify(jsonData));
$("#target_id").attr('data-json', data_str);

然后用atob解码它

let tourData = $(this).data("json");
tourData = atob(tourData);

回复于 2024-05-13T20:38:35+08:00

将JSON对象存储在HTML jQuery中的data属性中

12 回答

相关问题