25

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でのみ問題があります。

4

2 に答える 2

28

DOM 要素を直接 JSON に変換しないでください。

すでに経験したように、たとえば Chrome では失敗しますが、結果も予期しないものになる可能性があります。

これは、データが循環しているためです。

Node には、childNodeそのすべての子を含むプロパティparentNodeと、親を指すプロパティがあります。

JSON 形式は参照をサポートしていないため、最後に到達するまでプロパティをたどる必要がありますが、子は子のリストを持つ親を指すため、これは無限ループです。エラー：

キャッチされていない TypeError: 循環構造を JSON に変換しています

これがブラウザによって解決されたとしても、他の問題が発生する可能性があります。childNodes存在するだけでなくchildElements. 同じことがparentNode/parentElementにも当てはまります。またnextSibling、prevSibling, firstChild, lastChild, ... も続く可能性が高いため、大量の重複データを含む恐ろしいほど大きな JSON ファイルになってしまいます。

于 2014-01-20T13:00:07.413 に答える
5

DOM 要素全体を変換する代わりに、DOM 要素の .innerHtml プロパティを使用する必要があります。したがって、次のようなものを探す必要があります。

JSON.stringify(table.tBodies[0].innerHTML)
于 2014-11-01T09:10:41.477 に答える