javascript - 使用模式表单 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()

$('#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').val()
      },
      success: function (response) {
          if (!response.error) {
              console.log(response.msg);
          } else {
              console.log(response.msg);
          }
      },
      error: function(response, textStatus, errorThrown) {
            $('#modal-review').modal('hide');
            console.log(response);
      }
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<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>
</div>