FormData JavaScript ulanyp, AJAX arkaly formany ibermek

FormData ýardymynda formanyň ähli meýdanlaryny awtomatik ýagdaýda serwere iberip bolýar. Bunyň nähili edilýändigine göz aýlalyň.

Aşakdaky forma biziň bolsun, ýagny inputlara name atlary berlen:

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

Geliň bu formany AJAX arkaly ibereliň. Ilki bilen, forma çykgydyny üýtgeýjä alalyň:

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

Indi sorag jisminde maglumat hökmünde FormData obyktini görkezeliň. Obyktiň özüne bolsa, parametr hökmünde forma çykgydyny ibereliň:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // forma çykgydyny iberýäris
  });
  
  event.preventDefault();
});

Netijede, serwerde inputlaryň bahalaryny olaryň name atributlaryndaky atlar boýunça alyp bileris:

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