使用模态表单ajax，超出HTMLFormElement.toString的最大调用堆栈大小

Question

我想使用模态窗口中的ajax请求提交表单。

通过单击以下链接打开模态：

<a class="btn btn-primary" data-target="#modal-review" data-toggle="modal">
  <i class="fa fa-edit"></i> Write a review
</a>

模态窗口：

<div class="modal  fade" id="modal-review" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
            <h3 class="modal-title-site text-center">PRODUCT REVIEW </h3>
        </div>
        <div class="modal-body">
            <h3 class="reviewtitle uppercase">Product: {{ $product->Name }}</h3>
            <form id="review-form" method="post" action="{{ route('add-review') }}">
                {{ csrf_field() }}

                <div class="form-group">
                    <label for="review-name">Name</label>
                    <input type="text" class="form-control" id="review-name"  required>
                </div>
                <div class="form-group">
                    <label for="review-email">Email</label>
                    <input type="text" class="form-control" id="review-email"  required>
                </div>
                <div class="form-group ">
                    <label for="review-title">Title: (optional)</label>
                    <input type="text" class="form-control" id="review-title"  required>
                </div>
                <div class="form-group ">
                    <label for="review-comment">Review</label>
                    <textarea class="form-control" rows="3" id="review-comment"  required></textarea>
                </div>
                <button type="button" id="send-review" class="btn btn-primary">Send review</button>
                <div id="review-response"></div>
            </form>
        </div>
    </div>
</div>

问题是当我单击发送按钮时，我得到了：

jquery-3.3.1.min.js:2 Uncaught RangeError: Maximum call stack size exceeded
at HTMLFormElement.toString (<anonymous>)

我做错了什么或我忘了做什么？

Ajax请求的代码是：

$('#send-review').on('click', function(e){
    e.preventDefault();
    var form = $('#review-form');
    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        dataType: 'json',
        data: {'review-name':$('#review-name').val(), 'review-email':$('#review-email').val(), 'review-title':$('#review-title').val(), 'review-comment':$('#review-comment')},
        success: function (response) {
            if(!response.error){
                console.log(response.msg);                   
            } else {
                console.log(response.msg);                    
            }
        }
    });
});

Answer 1

您的问题在这里：

....'review-comment':$('#review-comment')},

更改为：

.....'review-comment': $('#review-comment').val()

....'review-comment':$('#review-comment')},

.....'review-comment': $('#review-comment').val()