AJAX тариқаи ирсоли форма бо истифода аз FormData дар JavaScript

Бо ёрии FormData мумкин аст ҳамаи майдонҳои формаро ба таври худкор ба сервер фиристод. Биёед бубинем, ки ин чӣ гуна анҷом дода мешавад.

Фарз кунем, ки мо форми зеринро дорем, ки ба инпутҳо сифатҳои (атрибутҳои) 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');

Ҳоло дар бадаи дархост (body) ҳамчун маълумот объекти FormData-ро муайян кунем. Ва худи объект ба параметр пайванд ба формаро медиҳем:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // пайванд ба формаро месупорем
  });
  
  event.preventDefault();
});

Дар натиҷа дар сервер мо метавонем қиматҳои инпутҳоро бо номҳои онҳо аз сифатҳои (атрибутҳои) name ба даст орем:

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