Stuur vorm via AJAX met FormData JavaScript

Met FormData kan alle vormvelde outomaties gestuur word na die bediener. Kom ons kyk hoe dit gedoen word.

Laat ons die volgende vorm hê, waaraan die insette die eienskappe name gegee is:

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

Laat ons hierdie vorm via AJAX stuur. Vir die begin, kry 'n verwysing na die vorm in 'n veranderlike:

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

Tans, in die liggaam van die versoek as data specifiseer ons die objek FormData. En aan die objek self gee ons die verwysing na die vorm as parameter:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // gee die verwysing na die vorm
  });
  
  event.preventDefault();
});

As gevolg daarvan op die bediener sal ons die waardes van die insette volgens hul name uit die eienskappe name kan kry:

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