FormData JavaScript аркылуу AJAX форма жөнөтүү

FormData жардамы менен форманын бардык талааларын серверге автоматтык түрдө жөнөтсө болот. Келгиле, муну кантип жасаганын карап көрөлү.

Бизде төмөнкүдөй форма болсун, анда input'торго 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();
});

Натыйжада серверде биз input'тордун маанилерин алардын аттары боюнча name атрибуттарынан ала алабыз:

server.jsexport default {
  '/handler/': function({post}) {
    console.log(post.num1);
    console.log(post.num2);
    return 'форманын маалыматтары кабыл алынды';
  }
}