使用 ajax 重新加载部分页面

Question

我正在使用 express 显示运行个进程的列表。我希望它们每隔几秒重新加载一次，以删除已完成的并添加新的。

我为此使用 ajax：

我的layout.pug（删节）

div(class="processes")
    for process in processes
         div(class="process")=process.name

  script.
    setInterval(() => {
      $.ajax({
        url: "/processes/running",
        type: "GET",
        success: function(response, status, http) {
          if (response) {
              processes = $('.processes')[0]
              html = ""
              for(process of response){
                html +='<div class="process">'+process.name+'</div>'
              }
              $(processes).html(html)
          }
        }
      });
    }, 3000)

而对应的路线就是

app.get('/processes/running', function(req, res){
    res.send(processes)
})

其中 processes 是我用来跟踪它们的数组。

这很好用。但是，我不喜欢代码重复。我基本上必须在我的代码中构建 list/table 两次。如果我要更改某些内容，我将不得不在两个地方都进行更改...

那么，有没有更好的方法来实现这个目标？

Answer 1

避免重复的一个解决方案就是不初始化你的内部div

div(class="processes")


  script.
    setInterval(() => {
      $.ajax({
        url: "/processes/running",
        type: "GET",
        success: function(response, status, http) {
          if (response) {
              processes = $('.processes')[0]
              html = ""
              for(process of response){
                html +='<div class="process">'+process.name+'</div>'
              }
              $(processes).html(html)
          }
        }
      });
    }, 3000)

div 将在第一次调用后填充。

如果您已经有数据，您可以将“html 创建部分”（if(response) 块）放在一个函数中，并在调用 setInterval 之前调用它，并像现在一样在响应中调用它。这将允许您将定义数组的代码放在一个地方

如果您还没有数据，我建议在 div 中显示一条消息，例如“还没有数据，请稍候”

使用 ajax 重新加载部分页面

Reload parts of page with ajax

ajax

express

pug