使用javascript提交HTML表单，但通过ajax发送

Question

是否可以使用form.submit()提交表单并使提交通过ajax而不是重定向url？

这是我所拥有的：

var form = document.form

form.onsubmit = function() {
  var params = {
    type: "POST",
    url: form.action
  }
  $.ajax(params).then(function(resp) {
     // handle response
  })
}
form.submit()

但是，提交不会击中回调，而是将浏览器重定向到form.action URL。 如何避免重定向并通过Ajax提交？

Answer 1

只是不要调用form.submit()并直接执行代码：

 var form = document.getElementById('form'); var params = { type: 'GET', url: form.action } $.ajax(params).then(function (resp) { console.log('ajax call successful'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form" action="https://jsonplaceholder.typicode.com/todos/1"> </form> 

如果您已经有一个form.onsubmit处理程序，并且绝对需要使用它，则只需调用它（看起来有点难看，但是可以完成工作）：

 var form = document.getElementById('form'); form.onsubmit = function () { var params = { type: 'GET', url: form.action } $.ajax(params).then(function (resp) { console.log('ajax call successful'); }); }; form.onsubmit(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form" action="https://jsonplaceholder.typicode.com/todos/1"> </form> 

注意：出于这些示例的目的，将动词更改为GET 。

Answer 2

您需要在函数结尾处返回false。

return: false

否则，它将在操作中将表单提交到指定的URL。

Answer 3

调用本机的submit()将绕过事件侦听器，因为您已经在使用jQuery，则可以使用jQuery提交侦听器并在以编程方式触发事件时阻止它

$(form).on('submit',function(e) {
  e.preventDefault()
  var params = {
    type: "POST",
    data: $(this).serialize(),
    url: this.action
  }
  $.ajax(params).then(function(resp) {
     // handle response
  })

// trigger jQuery submit
}).submit()