json 为什么在javascript post请求后页面会刷新？

jv4diomz 于 2023-05-02 发布在 Java

关注(0)|答案(3)|浏览(219)

当我发送后请求JSON服务器用户名和分数页面正在刷新。修补程序请求没有此问题页面未刷新。
我需要的页面不应该被刷新，因为我的得分模式关闭，游戏重新启动。

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);
  }

});

JSON

来源：https://stackoverflow.com/questions/76095140/why-is-the-page-refreshed-after-javascript-post-request

3条答案

按热度按时间

gzjq41n41#

在触发fetch的方法上，尝试接收一个事件，然后使用以下命令将其设置为阻止默认值：

var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);

在提交时停止表单刷新页面的示例中，handleForm（）是被调用的方法

赞(0）回复(0）举报 2023-05-02

jrcvhitl2#

若要防止页面刷新，可以将事件侦听器添加到表单提交事件，并使用事件阻止事件的默认行为。public void run（）.下面是一个例子，看看你是否能解决你的问题：

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
  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
            })
          })
        }
      })
  }
});

赞(0）回复(0）举报 2023-05-02

igetnqfo3#

问题解决了我创建了DB。json服务器在与我的项目文件不同的单独文件夹中