更新特定内容，而不是使用nodejs刷新整个页面

Posted 2021-04-28

我制作了一款幸存的游戏，我想在游戏结束后显示分数img-1

我可以只添加新的路由器/ game / score，但我想留在同一页面上，仅在提交用户名后才更新分数内容。

这是我的PUG文件

  <form class="bottom-form" action="/travel?_put" method="post">
   <input type="text" class="input-timer" name="timer">
   <input type="text" class="input-name" name="username"  placeholder="What 
        is your name?" autocomplete="off" required>
   <button type="submit" class="input-button">         
    <span class="button-txt"> &#8594;</span>
   </button>
  </form>

.scoreboard 
        -var newScore= scores.sort((a, b) => (a.timer > b.timer ? -1 : 1))
        .rank-1 TOP 1 
        .username-1 #{newScore[0].username} 
        .score-1 #{newScore[0].timer} Sec
        .rank-2 TOP 2 
        .username-2 #{newScore[1].username}
        .score-2 #{newScore[1].timer} Sec
        .rank-3 TOP 3 
        .username-3 #{newScore[2].username}
        .score-3 #{newScore[2].timer} Sec
        .rank-4  
        .username-4 
        .score-4 

这是我的index.js文件。我使用mongodb和nodejs

/////setting up mongodb////////// 
mongoose
  .connect(url, {
    useNewUrlParser: true,
    useCreateIndex: true,
    useFindAndModify: false
  })
  .then(() => console.log("============DB connection successful!=========="));

/////////route////////////////////
app.get("/travel", (req, res) => {
  Score.find({}, (err, score) => {
    if (err) {
      console.log(err);
    } else {
      res.render("game", { scores: score });
    }
  });
});
app.post("/travel", (req, res) => {
  const score = new Score({
    _id: new mongoose.Types.ObjectId(),
    username: req.body.username,
    timer: req.body.timer,
    timestamp: new Date()
  });
  Score.create(score, err => {
    if (err) {
      console.log(err);
    } else {
      console.log(score);
      res.status(204).send();
    }
  });
});
app.put("/travel", (req, res) => {
  Score.find({}, (err, score) => {
    if (err) {
      console.log(err);
    } else {
      res.send("game");
    }
  });
});

答案

您可以注册POST路由并从AJAX发出pug请求。即

index.js

app.post('/api/score', (req, res) => {
     // Get params from req, and make logic ...

     // Send data to front end
     res.json({
       message: 'Score updated'
     });
});

PUG

script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js')
script.
  $(document).ready(function(){
    $('.bottom-form').submit(function (e) {
    e.preventDefault();
    $.post({url: "/api/score", data, success: function(result){
     // Update score from here
      }});
    });
  });

我在这里使用了jQuery，但是您可以随意使用vanilla js或其他任何lib。