ფორმის 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');

ახლა მოთხოვნის სხეულში, როგორც მონაცემები, მივუთითოთ ობიექტი 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';
  }
}