Javascript HTML页面中的Node.js和现有Div

我正在阅读node.js中面临的一个问题的解决方案，发现一个问题已经得到了回答：

但我在找别的东西

我在服务器上有一个表单和一个div作为客户端HTML的一部分。 用户单击按钮向服务器发送请求。服务器依次检查请求并将响应发送回客户端浏览器。这里我想做的是将响应数据附加到客户端浏览器上现有的HTML div中

例如，我想在现有HTML DIV中填充数据，作为以下代码的一部分：

app.post('/process_post', urlencodedParser, function (req, res) {  
   // Prepare output in JSON format  
  response = {  
      first_name:req.body.first_name,  
      last_name:req.body.last_name  
      // HERE I would like to use HTML coding to insert data to existing HTML DIV.
  };  
  console.log(response);  
  res.end(JSON.stringify(response));  
})  

---

谢谢。

您的服务器应该在响应中将所需的数据作为JSON对象发送回客户端，然后您可以在客户端上使用JavaScript通过以下步骤执行您想要的操作：

• 使用类似document.getElementById的内容来选择div，例如

  const elem=document.getElementById（“您的id”）

• 使用innerHTML

  elem.innerHTML=新数据更新div的内容

编辑：您可以创建一个函数，在单击按钮时向服务器发送异步Ajax请求，然后使用promise处理更新div内容。例如，我熟悉使用axios library For Ajax：

const launchAjax=（formData）=>{
axios.post（“/process\u post”，formData）
.然后（响应数据=>{
const elem=document.getElementById（“您的id”）；
//假设所需数据在JSON中称为info
elem.innerHTML=responseData.info；
});
const button=document.getElementById（“按钮id”）；
addEventListener（“单击”，启动Ajax）；

或者使用浏览器本机支持的获取API：

const launchAjax=（formData）=>{
获取（“/process\u post”{
方法：“张贴”，
正文：JSON.stringify（formData）
})
.then（response=>response.json（））
.然后（responseJSON=>{
const elem=document.getElementById（“您的id”）；
//假设所需数据在JSON中称为info
elem.innerHTML=responseData.info；
});
}

当然可以，但是客户端javascript什么时候执行？它如何知道它已经从服务器接收到数据。例如，如果我单击html按钮>请求转到服务器>服务器发送响应>客户端接收，但是如何告诉客户端javascript它现在需要在html div中追加数据。非常感谢。让我尝试一下，然后返回f我有一个问题。你能在上面的例子中发布一个使用axios librry的例子吗？那太好了。这个例子已经使用了axios库。如果你使用的是像webpack这样的构建工具，你只需要导入文件顶部的库。或者，你可以使用browsersThank you原生支持的获取API再次感谢你的帮助和时间！