Javascript 使用NodeJs自动更新网站中的元素

我仍处于编程的早期阶段，我正在考虑创建一些东西，每x秒进行一次API调用，并用新内容更新我的网站

我最初的目标是使用FOR循环（.ejs页面）从API获得的内容填充一个表

现在，我只想在x秒后更新网页中的那些行和列（从FOR循环创建），而不是刷新整个页面。 如何实现这一点（更新这些行和列）

以股票市场网站为例，它只是更新股票价格，而不是整个页面

---

提前感谢您的帮助

我将考虑与node.js结合使用来构建您的网站。然后在html中使用rest api调用更新。

我将考虑与node.js结合使用来构建您的网站。然后在html中使用rest api调用更新。

解决此问题的最常用方法是将从其他api获取的数据存储在数据库中，然后创建一个端点，将该数据的最新版本作为JSON提供服务

然后在客户端，定期向服务器请求获取内容，并更新页面的一部分以显示可用的最新数据

这可以简单到：

// server side (if you use express)

app.get("/data", (req, res) => {
  database.getMostRecentEntry()
    .then(data => res.json(data))
    .catch(err => res.status(500).end());
});


// client side

function fetchMostRecentData() {
  fetch("/data")
    .then(response => response.json())
    .then(data => updateView(data))
    .catch(err => showError(err));
}

function updateView(data) {
  let container = document.getElementById("app");

  container.innerHTML = `
    <tr>
      <td>${data.name}</td>
      <td>${data.value}</td>
    </tr>
  `;
}

function showError(err) {
  console.error(err);
  alert("Something went wrong");
}

// call fetchMostRecentData once every 10s
setInterval(fetchMostRecentData, 10000);

//服务器端（如果使用express）
app.get（“/data）”，（请求，res）=>{
database.getmostrecentry（）
.then（data=>res.json（data））
.catch（err=>res.status（500.end（））；
});
//客户端
函数fetchMostRecentData（）{
获取（“/data”）
.then（response=>response.json（））
.然后（数据=>updateView（数据））
.catch（err=>showError（err））；
}
函数更新视图（数据）{
让容器=document.getElementById（“app”）；
container.innerHTML=`
${data.name}
${data.value}
`;
}
功能错误（err）{
控制台错误（err）；
警惕（“出了差错”）；
}
//每10秒调用一次fetchMostRecentData
setInterval（fetchMostRecentData，10000）；

现在，这不是一个非常健壮的解决方案，存在一些相当严重的安全问题，但这是一个起点

---

从这里开始，您应该考虑使用前端框架（而不是自己更新

innerHTML

）。您还可以考虑使用websockets，而不是通过HTTP端点提供数据。

解决此问题的最常用方法是将从其他API获得的数据存储在数据库中，然后创建一个端点，将该数据的最新版本作为JSON提供服务

然后在客户端，定期向服务器请求获取内容，并更新页面的一部分以显示可用的最新数据

这可以简单到：

// server side (if you use express)

app.get("/data", (req, res) => {
  database.getMostRecentEntry()
    .then(data => res.json(data))
    .catch(err => res.status(500).end());
});


// client side

function fetchMostRecentData() {
  fetch("/data")
    .then(response => response.json())
    .then(data => updateView(data))
    .catch(err => showError(err));
}

function updateView(data) {
  let container = document.getElementById("app");

  container.innerHTML = `
    <tr>
      <td>${data.name}</td>
      <td>${data.value}</td>
    </tr>
  `;
}

function showError(err) {
  console.error(err);
  alert("Something went wrong");
}

// call fetchMostRecentData once every 10s
setInterval(fetchMostRecentData, 10000);

//服务器端（如果使用express）
app.get（“/data）”，（请求，res）=>{
database.getmostrecentry（）
.then（data=>res.json（data））
.catch（err=>res.status（500.end（））；
});
//客户端
函数fetchMostRecentData（）{
获取（“/data”）
.then（response=>response.json（））
.然后（数据=>updateView（数据））
.catch（err=>showError（err））；
}
函数更新视图（数据）{
让容器=document.getElementById（“app”）；
container.innerHTML=`
${data.name}
${data.value}
`;
}
功能错误（err）{
控制台错误（err）；
警惕（“出了差错”）；
}
//每10秒调用一次fetchMostRecentData
setInterval（fetchMostRecentData，10000）；

现在，这不是一个非常健壮的解决方案，存在一些相当严重的安全问题，但这是一个起点

---

---

从这里开始，您应该考虑使用前端框架（而不是自己更新

innerHTML

）。您还可以考虑使用WebSocket，而不是通过HTTP端点提供数据。

您没有要求任何帮助。你的问题是什么？@RandyCasburn刚刚更新了我的问题。调查Socket.io和websockets的使用情况。使用WebSocks，您不需要设置计时器，您可以创建与服务器的连接，服务器（您的NodeJ）可以推送更新。更新内容是简单的DOM内容。@RandyCasburn如果使用套接字，仍然需要设置计时器。它只是从你在客户端设置的计时器，变成你在服务器上设置的计时器。@danprince-ohhhnoo。整个概念发生了很好的变化。现在可以专注于数据流，而不是任意计时器。在需要发送数据时发送，而不是在数据可能完全相同的任意时间发送。您没有请求任何帮助。你的问题是什么？@RandyCasburn刚刚更新了我的问题。调查Socket.io和websockets的使用情况。使用WebSocks，您不需要设置计时器，您可以创建与服务器的连接，服务器（您的NodeJ）可以推送更新。更新内容是简单的DOM内容。@RandyCasburn如果使用套接字，仍然需要设置计时器。它只是从你在客户端设置的计时器，变成你在服务器上设置的计时器。@danprince-ohhhnoo。整个概念发生了很好的变化。现在可以专注于数据流，而不是任意计时器。在需要发送数据时发送，而不是在数据可能完全相同的任意时间发送。这里不需要AJAX。对于初学者来说，AJAX要简单得多！我不想因为别人的无能而轻视一个人的能力。这里不需要AJAX。对于初学者来说，AJAX要简单得多！我不想因为别人的无能而轻视一个人的能力。这里不需要AJAX。WebSockets并允许服务器推送。@RandyCasburn对于仍在学习编程的人来说，套接字太过了。它们更难调试，更难扩展，更难安装。胆小鬼！我不喜欢因为别人的无能而轻视一个人的能力。@RandyCasburn没有人的能力被轻视。学习