jquery - 在提交表单时调用js函数并阻止ajax请求完成后提交表单

Question

所以我试图验证模态 Bootstrap 内的表单这是表格

    <div id="extendWorkflowModal" class="modal fade" role='dialog'>
  <div class="modal-dialog" style="width: 94%">
    <div class="modal-content">
      <header class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close Modal</span></button>
        <h4 class="modal-title" id="mySmallModalLabel" style="padding-left: 2%;">Select a block</h4>
      </header>
      <form id="wfpopup" onsubmit ='return addTasksPopUP();' method="post">
      <div class="modal-body">

          <%=render 'workflowpanel' %>
                <br />
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary" id="extendConfirmed">Add</button>
        <button type="button" data-dismiss="modal" class="btn">Cancel</button>
      </div>
        </form>

    </div>
  </div>
</div>

这是正在调用的函数

function addTasksPopUP() {

  $.ajax({
    type: "POST",
    url: '/timeline/addTaskPopup/' + engagement_id,
    data: $('#workflowpopup').serialize(),
    success: function(msg) {
      $("#thanks").html(msg)
      $('#extendWorkflowModal').modal('hide');
      $("#apd_success").show();
    },
    error: function() {
      console.log("failure");
    }
  });

}

在ajax请求完成后，似乎表单正在使用post方法向urlengage/id发出请求，但我希望该表单应该使用get方法发出请求，但问题是如果我使用get方法，则会收到错误请求-URI 太大，因为表单包含许多大约 50-60 的字段，所以我使用 post 方法。任何建议都会有很大帮助。

Answer 1

您正在使用ajax，没有必要在表单onsubmit事件上调用ajax函数。尝试通过 'id="extendConfirmed"' 上的 'onclick' 事件调用 ajax。就够了。