向json-server-auth发送POST请求后页面刷新的原因及解决方法

可能的原因 #

• DOM加载顺序问题：你的JS代码可能在表单元素还没渲染到页面时就执行了，导致document.querySelector('.form')找不到目标元素，submit事件监听根本没绑定上，自然无法阻止表单默认的刷新行为。Codepen默认会把JS代码放在DOM加载完成后执行，所以不会有这个问题，但Live Server如果把JS放在<head>里，就会触发这个情况。
• async函数潜在的错误干扰：虽然你写了e.preventDefault()，但如果fetch请求过程中出现错误（比如网络问题、接口报错），async函数会抛出异常，后续代码（包括return false）可能不会执行，但这种情况概率较低，核心还是监听未生效的问题。

解决办法 #

1. 确保JS代码在DOM加载完成后执行

   • 把你的JS脚本标签放在HTML的<body>标签最末尾，示例：

     <body>
       <form class="form">
         <input type="email">
         <input type="password">
         <button>Регистрация</button>
       </form>
       <script>
         const form = document.querySelector('.form')
         form.addEventListener('submit', async (e) => {
           e.preventDefault()
           
           let data = {
             email: e.target[0].value,
             password: e.target[1].value
           }
           
           let res = await fetch('http://localhost:8080/signup', {
             method: "POST",
             headers: {
               'Content-Type': 'application/json'
             },
             body: JSON.stringify(data)
           })
           let json = await res.json()
           console.log(json)
         })
       </script>
     </body>
     

   • 或者用DOMContentLoaded事件包裹代码，确保DOM加载完成后再执行：

     document.addEventListener('DOMContentLoaded', () => {
       const form = document.querySelector('.form')
       form.addEventListener('submit', async (e) => {
         e.preventDefault()
         // 其余业务代码
       })
     })
     

2. 给按钮明确设置类型
   给表单里的按钮加上type="button"，避免它默认作为提交按钮触发表单提交（即使监听失效，也能兜底防止刷新）：

   <button type="button">Регистрация</button>
   

3. 检查控制台错误
   打开浏览器开发者工具的控制台，看看是否有Cannot read properties of null (reading 'addEventListener')这类错误，这能直接确认是否是元素未找到的问题。

内容的提问来源于stack exchange，提问作者Барин