Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Submit forms asynchronously while keeping the basic form usable.
AJAX Forms and Progressive Enhancement is easiest to learn by reading the example, changing it, and observing the result.
const form = document.querySelector('#signup');
form.addEventListener('submit', async (event) => {
event.preventDefault(); // keep the page from reloading
const response = await fetch(form.action, {
method: 'POST',
body: new FormData(form)
});
document.querySelector('#status').textContent =
response.ok ? 'Saved!' : 'Something went wrong';
});Practice the AJAX Forms and Progressive Enhancement example in a small scratch file, then explain what changed and why.