未捕获类型错误：将循环结构转换为JSON

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');
                    }
                }
            });             
        }
    });
});

我收到以下错误消息：

未捕获的类型错误：将圆形结构转换为JSON

我只有Chrome问题。

Answer 1

您需要使用DOM元素的.innerHtml属性，而不是转换整个DOM元素。因此，您应该考虑以下内容：

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

Answer 2

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

虽然-就像你已经经历过的-它失败了，例如在Chrome，结果也可能是意想不到的。

这是因为数据是循环的：

Node具有包含其所有子节点的属性子节点和指向父节点的属性父节点。

JSON格式不支持引用，所以它需要跟随属性直到结束，但是因为一个子指向它的父级，父级有它的子级列表，这是一个无休止的循环，这就是你得到错误的原因：

未捕获类型错误：将循环结构转换为JSON

即使通过浏览器解决了这一问题，您也可能会遇到其他问题。因为不仅存在childNodes，而且还存在childElements。这同样适用于parentNode/parentElement，然后还有nextSibling，previsibling，firstChild，lastChild。。。这可能也会发生，因此最终会出现一个可怕的大JSON文件，其中包含大量重复数据。