Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Keep forms working when JavaScript is unavailable.
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 Progressive Enhancement example in a small scratch file, then explain what changed and why.