时间戳

首页 > 解决方案 > 使用 javascript 提交 HTML 表单，但通过 ajax 发送

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

问题描述

是否可以使用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.actionurl。如何避免重定向并通过 ajax 提交？

标签： javascriptjqueryajax

解决方案

只是不要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注意：为了这些示例的目的，将动词更改为。

推荐阅读