Отправьте HTML-форму, используя javascript, но отправьте ее через 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

При вызове native 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()

Answer 3

Вам необходимо вернуть false в конце вашей функции.

return: false

В противном случае он отправит форму на указанный URL-адрес в действии.