FormData JavaScript මගින් AJAX හරහා පෝරමය යැවීම

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';
  }
}