如何设置事件处理程序
假设您有一个如下所示的HTML表单:
在处理 JavaScript 时,第一部分仍然适用。我们仍然需要文件输入来访问设备上的文件。但是浏览器有一个Fetch API,我们可以使用它来发出没有表单的 HTTP 请求。
我仍然喜欢包括一个表格,因为:
渐进增强:如果 JavaScript 由于某种原因失败,HTML 表单仍然可以工作。
我很懒惰:表格实际上会让我以后的工作更轻松,正如我们将看到的。
考虑到这一点,为了让 JavaScript 提交此表单,我将设置一个“提交”事件处理程序。
const form = document.querySelector(‘form’);
form.addEventListener(‘submit’, handleSubmit);
/** @param {Event} event */
function handleSubmit(event) {
// The rest of the logic will go here.
}
在本文的其余部分,我们将只关注事件处理函数中的逻辑,handleSubmit.
如何准备 HTTP 请求
在此提交处理程序中,我需要做的第一件事是调用事件的preventDefault方法来阻止浏览器重新加载页面以提交表单。我喜欢将它放在事件处理程序的末尾,这样如果在此函数主体内抛出异常preventDefault,将不会被调用,浏览器将回退到默认行为。
/** &#