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

Question

我有一个tableDnD与JSON.stringify拖放:

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中失败,结果也可能出乎意料.

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

Node具有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)