FormData ile AJAX Kullanarak Form Gönderme JavaScript

FormData kullanarak bir formdaki tüm alanları otomatik olarak sunucuya gönderebilirsiniz. Bunun nasıl yapıldığına bir göz atalım.

Aşağıdaki gibi, input elemanlarına name nitelikleri verilmiş bir formumuz olduğunu varsayalım:

public/index.html<form action="" method="GET">
  <input name="num1">
  <input name="num2">
  <input type="submit">
</form>

Bu formu AJAX ile gönderelim. İlk olarak formun referansını bir değişkende alalım:

public/client.jslet form = document.querySelector('form');

Şimdi, istek gövdesinde veri olarak FormData nesnesini belirteceğiz. Ve bu nesneye parametre olarak formun referansını ileteceğiz:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // formun referansını iletiyoruz
  });
  
  event.preventDefault();
});

Sonuç olarak, sunucuda input değerlerini name niteliklerindeki isimlerine göre alabileceğiz:

server.jsexport default {
  '/handler/': function({post}) {
    console.log(post.num1);
    console.log(post.num2);
    return 'form verisi alındı';
  }
}