为何发送JavaScript POST请求后页面会刷新？PATCH请求无此问题

问题描述 #

发送包含用户名和分数的JSON格式POST请求时，页面会自动刷新；但发送PATCH请求时无此问题。需要避免页面刷新，否则分数弹窗会关闭且游戏会重启。

原代码 #

let vaxt = 5;
let timeStart = false;


input.addEventListener('keydown', ()=>{


  if (!timeStart) {

    timeStart = true;

    let timer = setInterval(()=>{
      vaxt--;
      time.innerText = `${vaxt}`;
   
      if (vaxt === 0) {
         clearInterval(timer);
         input.disabled = true;
         scoreModal.style.display = 'block';

         fetch('http://192.168.0.105:5500/users')
          .then(res => res.json())
          .then(users => {
             const existingUser = users.find(user => user.username === username)

             if (existingUser) {
                if (score > existingUser.score) {
                   fetch(`http://192.168.0.105:5500/users/${existingUser.id}`, {
                      method: 'PATCH',
                      headers: {
                       'Content-Type': 'application/json'
                      },
                      body: JSON.stringify({
                         score: score
                      })
                   })
                }
             }else{
                 fetch('http://192.168.0.105:5500/users', {
                     method: 'POST',
                     headers:{
                       'Content-Type': 'application/json'
                     },
                     body: JSON.stringify({
                        username: username,
                         score: score
                     })
                 })
             }
          })

      }
   
   }, 1000);
  }

});

问题原因 #

页面刷新并非由POST请求本身导致，而是因为input元素的keydown事件没有阻止浏览器的默认行为。比如输入框在<form>标签内时，按下回车键会触发表单默认提交动作，导致页面刷新；而PATCH请求的场景中，因用户已存在不会走到POST分支，刚好避开了触发默认行为的时机。

解决方案 #

在keydown事件处理函数中添加event.preventDefault()，阻止浏览器默认行为，避免页面意外刷新：

let vaxt = 5;
let timeStart = false;

// 接收event参数
input.addEventListener('keydown', (event)=>{
  // 阻止默认行为，避免表单提交或其他导致页面刷新的动作
  event.preventDefault();

  if (!timeStart) {
    timeStart = true;

    let timer = setInterval(()=>{
      vaxt--;
      time.innerText = `${vaxt}`;
   
      if (vaxt === 0) {
         clearInterval(timer);
         input.disabled = true;
         scoreModal.style.display = 'block';

         fetch('http://192.168.0.105:5500/users')
          .then(res => res.json())
          .then(users => {
             const existingUser = users.find(user => user.username === username)

             if (existingUser) {
                if (score > existingUser.score) {
                   fetch(`http://192.168.0.105:5500/users/${existingUser.id}`, {
                      method: 'PATCH',
                      headers: {
                       'Content-Type': 'application/json'
                      },
                      body: JSON.stringify({
                         score: score
                      })
                   })
                }
             }else{
                 fetch('http://192.168.0.105:5500/users', {
                     method: 'POST',
                     headers:{
                       'Content-Type': 'application/json'
                     },
                     body: JSON.stringify({
                        username: username,
                         score: score
                     })
                 })
             }
          })

      }
   
   }, 1000);
  }

});

额外优化建议 #

1. 仅在特定按键（比如回车键）触发游戏开始逻辑，避免误触：

   input.addEventListener('keydown', (event)=>{
     // 只在按下回车键时触发逻辑
     if (event.key !== 'Enter') return;
     event.preventDefault();
   
     // 后续代码...
   });
   

2. 为fetch请求添加错误处理，避免因网络问题导致逻辑中断：

   fetch('http://192.168.0.105:5500/users')
     .then(res => {
       if (!res.ok) throw new Error('请求失败');
       return res.json();
     })
     .then(users => {
       // 处理用户逻辑
     })
     .catch(err => console.error('请求出错:', err));
   

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