Question

我已经在php中创建了一个应用程序，我正在使用bootstrap模型使用AJAX更新用户详细信息。现在有两种形式：首先更新用户的详细信息，并向其他用户添加评论。当我尝试向AJAX提交表单并且尝试提交表单时，它不起作用，当我使用ajaxComplete函数时，我的表单数据已成功提交，但是在同一时间多次提交了表单

$(document).ajaxComplete(function() {
      $("#add-remarks").on('submit', (function(e) {
        e.preventDefault();
        $.ajax({
          type: "POST",
          url: $("#add-remarks").attr("action"),
          cache: false,
          context: this,
          data: $("#add-remarks").serialize(), //only input
          success: function(data) {
            var obj = JSON.parse(data);
            $("#add-remarks")[0].reset();
            if (obj['msg'] == 'isuccess') {
              notification('insert');
            } else {
              notification('error');
            }
          }
        });
      }));

<div class="modal-body">
  <div class="row">
    <div class="col-md-12">
      <div class="card-group-control card-group-control-right" id="accordion-model">
        <div class="card">
          <form method="post" name="update-user-details" id="update-user-details" action="">
            <div class="row">
              <div class="col-md-4">
                <div class="form-group form-group-float">
                  <label class="d-block font-weight-semibold">First Name</label>
                  <input type="text" class="form-control" placeholder="First Name" name="customer_name" id="customer_name">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group form-group-float">
                  <label class="d-block font-weight-semibold">Mobile</label>
                  <input type="text" class="form-control" placeholder="Mobile" name="mobile_number" id="mobile_number">
                </div>
              </div>
              <button type="submit" class="btn bg-blue">Save Changes</button>
            </div>
          </form>
          <form method="post" name="remarks" id="remarks" action="">
            <div class="row">
              <div class="col-md-4">
                <div class="form-group form-group-float">
                  <label class="d-block font-weight-semibold">Remarks</label>
                  <input type="text" class="form-control" placeholder="Remarks" name="remarks" id="remarks">
                </div>
              </div>
              <button type="submit" class="btn bg-blue">Save Changes</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

将这段代码移至ajaxComplete（）函数之外。您可能会以某种方式多次触发ajaxComplete函数，从而导致表单提交的多个事件侦听器。

 $("#add-remarks").on('submit', (function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: $("#add-remarks").attr("action"),
      cache: false,
      context: this,
      data: $("#add-remarks").serialize(), //only input
      success: function(data) {
        var obj = JSON.parse(data);
        $("#add-remarks")[0].reset();
        if (obj['msg'] == 'isuccess') {
          notification('insert');
        } else {
          notification('error');
        }
      }
    });
  }));

Ajax提交多次

1 个答案: