Uncaught TypeError: преобразование круговой структуры в JSON

У меня есть перетаскивание 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');
                    }
                }
            });             
        }
    });
});

У меня есть это сообщение об ошибке:

Uncaught TypeError: преобразование круговой структуры в JSON

У меня проблема только в Chrome.

Ответы

Ответ 1

Вы не должны напрямую преобразовывать элемент DOM в JSON.

Пока - как вы уже испытали - он не работает, например. в Chrome результаты могут быть неожиданными.

Причиной этого является то, что данные являются круглыми:

A Node имеет свойство childNode, содержащее все его дочерние элементы и свойство parentNode, указывающее на родителя.

Формат JSON не поддерживает ссылки, поэтому он должен будет следовать свойствам до тех пор, пока не будет достигнут конец, а потому, что ребенок указывает на родителя, у которого есть список его дочерних элементов, это бесконечный цикл, вот почему почему вы получаете сообщение об ошибке:

Uncaught TypeError: преобразование круговой структуры в JSON

Даже если это разрешено браузером, у вас могут быть другие проблемы. Потому что существует не только childNodes, но и childElements. То же самое для parentNode/parentElement, тогда у вас также есть nextSibling, prevSibling, firstChild, lastChild,..., которые, вероятно, также будут соблюдены, поэтому вы попадете в ужасающий большой json файл, содержащий дубликат повторяющихся данных.

Ответ 2

Вам нужно использовать свойство .innerHtml элемента DOM вместо преобразования всего элемента DOM. Таким образом, вы должны искать что-то вроде:

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