如何在jQuery中将JSON格式设置为HTML5数据属性

Question

我正在尝试这些HTML

<div data-params="{a: 1, b: '2'}" id="TEST1"></div>
<div data-params='{"a": 1, "b": "2"}' id="TEST2"></div>

然后我在jQuery中使用data()方法

$('#TEST1').data('params'); //return a string
$('#TEST2').data('params'); //return a object

但是TEST1它不是一个返回对象,而是一个字符串,它只能返回对象TEST2.但是我想通过TEST1得到一个对象,我该怎么做？

=============

最后,我选择编写一个函数来实现自己的需求

$.fn.data2 = function(key, value)
{
    if (value === undefined) 
    {
        var data = $(this).data(key);
        if (typeof(data) === 'string') 
        {
            var _data = data.replace(/^[\s\r\n]*/g, '').replace(/[\s\r\n]*$/g, '');
            if (_data.match(/\{.*\}/) || _data.match(/\[.*\]/)) {
                try {
                    _data = (new Function( 'return ' + data ))();
                    if (typeof(_data) == 'object') {
                        $(this).data(key, _data);
                        data = _data;
                    }
                } catch(ex) {}
            }
        }
        return data;
    }
    return $(this).data(key, value);
};

Answer 1

为了被解析为对象,data属性必须是格式良好的JSON对象.

在您的情况下,您只需要引用对象键(就像在第二个对象中一样).尝试:

<div data-params='{"a": 1, "b": "2"}' id="TEST1"></div>

有关更多信息,请参阅数据方法文档,相关部分是这一个(强调我的):

每次尝试都将字符串转换为JavaScript值(这包括布尔值,数字,对象,数组和null),否则它将保留为字符串...... ...当data属性是对象(以...开头'{')时或者数组(以...开头 '[')则jQuery.parseJSON用于解析字符串; 它必须遵循有效的JSON语法,包括引用的属性名称.

Answer 2

你可以逃避内部引号:

<div data-params="{&quot;a&quot;: 1, &quot;b&quot;: &quot;2&quot;}" id="TEST2"></div>

但是你的第二种方法没有错:

<div data-params='{"a": 1, "b": "2"}' id="TEST2"></div>

我会用那个.