未捕獲的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)