FormData JavaScript көмегімен AJAX арқылы форма жіберу

FormData көмегімен форманың барлық өрістерін серверге автоматты түрде жіберуге болады. Мұны қалай жасауға болатынын қарастырайық.

Бізде келесі форма бар делік, онда input элементтеріне name атрибуттары берілген:

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

Бұл форманы AJAX арқылы жіберейік. Алдымен формаға сілтемені айнымалыға алайық:

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

Енді сұрау денесінде деректер ретінде FormData объектін көрсетейік. Ал объектінің өзіне параметр ретінде формаға сілтеме береміз:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // формаға сілтеме береміз
  });
  
  event.preventDefault();
});

Нәтижесінде серверде біз input элементтерінің мәндерін олардың аттары бойынша name атрибуттарынан ала аламыз:

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