Formanın AJAX vasitəsilə FormData JavaScript ilə göndərilməsi

FormData vasitəsilə formanın bütün sahələrini avtomatik olaraq serverə göndərmək olar. Gəlin görək bu necə edilir.

Tutaq ki, bizdə aşağıdakı forma var, burada inputlara name atributları verilib:

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

Gəlin bu formanı AJAX ilə göndərək. Əvvəlcə formaya istinadı dəyişənə əldə edək:

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

İndi sorğunun gövdəsində məlumat kimi FormData obyektini göstərək. Obyektin özünə parametr kimi formaya olan istinadı ötürək:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // formaya istinadı ötürürük
  });
  
  event.preventDefault();
});

Nəticədə serverdə inputların qiymətlərini onların name atributlarından adları ilə əldə edə bilərik:

server.jsexport default {
  '/handler/': function({post}) {
    console.log(post.num1);
    console.log(post.num2);
    return 'form data received';
  }
}