Dërgimi i Formës përmes AJAX duke përdorur FormData në JavaScript

Duke përdorur FormData mund të dërgoni automatikisht të gjitha fushat e formës në server. Le të shohim se si bëhet kjo.

Le të supozojmë se kemi formën e mëposhtme, ku inputeve u janë dhënë atributet name:

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

Le ta dërgojmë këtë formë përmes AJAX. Për fillim, le të marrim një referencë për formën në një variabël:

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

Tani në trupin e kërkesës si të dhëna le të përcaktojmë objektin FormData. Dhe vetë objektit si parametër ia kalojmë referencën për formën:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // kalojmë referencën për formën
  });
  
  event.preventDefault();
});

Si rezultat në server ne do të jemi në gjendje të marrim vlerat e inputeve sipas emrave të tyre nga atributet name:

server.jsexport default {
  '/handler/': function({post}) {
    console.log(post.num1);
    console.log(post.num2);
    return 'të dhënat e formës u pranuan';
  }
}