添加AJAX代码后表单提交失效浏览器自动刷新问题求助

错误点整理 #

• DOM选择器ID大小写不匹配：表单元素的id属性为myform（全小写），但getElementById中传入的是myForm（F大写），导致无法选中表单元素，提交事件绑定失败，浏览器执行默认提交刷新行为。
• 箭头函数语法错误：事件回调的箭头函数写为(e) = >{，等号和大于号之间多了空格，正确写法应为(e) => {，语法错误会导致整段JS代码运行中断。
• 内置构造函数大小写错误：new Formdata(myForm)中Formdata拼写错误，正确的构造函数名应为FormData（D大写），调用错误会抛出运行时异常，阻止preventDefault生效。

修复后完整代码 #

<form id="myform">
  <input type="hidden" name="amount" value="5" />
  <input type="text" name="to" />
  <button type="submit">Go</button>
</form>

<script>
  const myForm = document.getElementById("myform");

  myForm.addEventListener("submit",(e) => {
    e.preventDefault();
    const request = new XMLHttpRequest();
    request.open("post", "https://faucetpay.io/api/v1/send");
    request.onload = function (){
      console.log(request.responseText);
    }
    request.send(new FormData(myForm));
  });
</script>

修复以上三个问题后即可阻止表单默认提交刷新行为，正常通过AJAX发送请求。

内容的提问来源于stack exchange，提问作者Muky