Question

我有一个使用JSON.stringify拖放的tableDnD：

jQuery(document).ready(function() {
    jQuery("#Table").tableDnD({
        onDragClass: "danger",
        onDrop: function(table, row) {
            jQuery.ajax({
                url: "ajax.php",
                type: "post",
                data: {
                    'rows' : JSON.stringify(table.tBodies[0].rows)
                },
                dataType: 'html',
                success: function(reponse) {
                    if(reponse) {
                        //alert('Success');
                    } else {
                        alert('Erreur');
                    }
                }
            });             
        }
    });
});

我有以下错误消息：

未捕获的TypeError：将循环结构转换为JSON

我只在Chrome上遇到问题。

Answer 1

您不应该直接将DOM元素转换为JSON。

虽然 - 就像你已经经历过的那样 - 它失败，例如在Chrome中，结果可能也会出乎意料。

原因是因为数据是循环的：

节点的属性childNode包含其所有子节点，属性parentNode指向父节点。

JSON格式不支持引用，因此它需要遵循属性直到达到目的，但是因为子指向其父级，其中包含子级列表，这是一个无限循环，这就是原因为什么你得到错误：

未捕获的TypeError：将循环结构转换为JSON

即使浏览器已解决此问题，您也可能遇到其他问题。因为不仅存在childNodes，还存在childElements。同样适用于parentNode / parentElement，那么您还有nextSibling，prevSibling，firstChild，lastChild，......也会被跟踪，所以你最终会看到包含重复数据的可怕的大型JSON文件。

Answer 2

您需要使用DOM元素的.innerHtml属性，而不是转换整个DOM元素。所以你应该寻找类似的东西：

JSON.stringify(table.tBodies[0].innerHTML)

未捕获的TypeError：将循环结构转换为JSON

2 个答案: