How can the function preventDefault() be used in Ajax?

edit

The preventDefault() function is typically used in JavaScript to prevent the default behavior of an HTML element, such as a form submission or a link click.

In an Ajax request, the preventDefault() function can be used to prevent the default form submission behavior that would normally occur when a user submits a form. Instead, the Ajax request can be sent asynchronously using XMLHttpRequest or the fetch() method.

Here's an example of how preventDefault() can be used with Ajax:

document.querySelector('#my-form').addEventListener('submit', function(event) {
  event.preventDefault(); // prevent form submission

  // Get form data
  const formData = new FormData(event.target);

  // Send Ajax request using fetch()
  fetch('/ajax/endpoint', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    // Handle response
  })
  .catch(error => {
    console.error('Error:', error);
  });
});

In this example, when the user submits the form with an id of my-form, the preventDefault() function is called to prevent the default form submission behavior. The form data is then extracted using FormData and sent as an Ajax request using the fetch() method. The response is handled using a .then() block, and any errors are caught and logged to the console.