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网址。如何避免重定向并通过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()

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

3 个答案: