HTML-форма отправки с одним полем ввода возвращает: Uncaught TypeError: Преобразование круговой структуры в JSON

Question

не могу понять, что вызвало Uncaught TypeError: Преобразование круговой структуры в JSON.У меня есть форма (1 поле ввода и кнопка отправки)

<form id="contact-form" method="post" action="submit_form.php" role="form" target="hiddenFrame">
<div class="controls">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_name">Author *</label>
                <input id="form_name" type="text" name="Author" class="form-control" placeholder="Enter name *" required="required" data-error="name is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="col-md-12 text-center">
    <input type="submit" class="btn btn-success btn-send" name="submit">
</div>
</div>
</div>
</form>
<script src="./js/submit_frm.js"></script>

код submit_frm.js:

$(function () {

// init the validator
// validator files are included in the download package
// otherwise download from http://1000hz.github.io/bootstrap-validator

$('#contact-form').validator();


// when the form is submitted
$('#contact-form').on('submit', function (e) {

    // if the validator does not prevent form submit
    if (!e.isDefaultPrevented()) {
        var url = "submit_frm.php";

        // POST values in the background the the script URL
        var data = JSON.stringify(e);
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            success: function (data)
            {
                // data = JSON object that contact.php returns

                // we recieve the type of the message: success x danger and apply it to the 
                var messageAlert = 'alert-' + data.type;
                var messageText = data.message;

                // let's compose Bootstrap alert box HTML
                var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';

                // If we have messageAlert and messageText
                if (messageAlert && messageText) {
                    // inject the alert to .messages div in our form
                    $('#contact-form').find('.messages').html(alertBox);
                    // empty the form
                    $('#contact-form')[0].reset();
                }
            }
        });
        return false;
    }
})
});

Консоль Google Chrome показывает, что ошибка возникает в var data = JSON.stringify (д);строка в файле js.Буду признателен за помощь в решении этой ошибки.

Answer 1

Это недопустимо: var data = JSON.stringify(e);

e в событии обычно является ссылкой на это событие, а не на ваши данные.Вместо этого вы должны сделать что-то вроде:

e.preventDefault();

var data = $(this).serialize();

Answer 2

Вы не можете преобразовать объекты окружности, например DOM Elements, в JSON, а e имеет ссылку на отправленную форму, поэтому вы не можете просто преобразовать событие в JSON

Если вы хотите получитьданные форм в виде JSON, вы можете создать объект FormData из формы, а затем выполнить итерацию по нему и преобразовать его вручную в JSON, например:

$('#contact-form').on('submit', function (e) {
    var formData = new FormData(e.target);
    var object = {};
    formData.forEach(function(value, key){
        object[key] = value;
    });
    var json = JSON.stringify(object);
    // do something with json ...
}