如何基于服务器端的信息添加HTML div元素?

问题描述 投票:0回答:1

我有每隔几分钟返回新数据的API。我需要的是自动创建新的div并将数据添加到其中。

当前,我能够在浏览器中显示初始数据。但是它应该每两分钟添加一次新的div和新数据。

app.js

var express = require('express');
var router = express.Router();
var request = require("request");

let name, value, bodyData;

var options = { method: 'GET',
  url: 'https://api.example.com/data1',
  qs: 
   { 
     valueType: 'MAXIMUM'
   },
  headers: 
   { 
     authorization: 'ABC123456',
     accept: 'application/json; charset=utf-8' } };

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  bodyData1 = JSON.parse(body);
  name = bodyData.name;
  value = bodyData.value;

});

router.get('/', function(req, res, next) {
  res.render('home', {names: name, values : value});
});

module.exports = router;

app.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Items</title>
</head>
<body>
  <div class="itemsList">
    <h2>List of available items:  </h2>
        <div>Name: <%= names %> Value: <%= values %><div>
  </div>

  <script src="/scripts.js">
    //var newDiv = document.createElement("div");
    //newDiv.innerHTML = "Name: ${names} Value: ${values}";
    //document.body.appendChild(newDiv);
  </script>
</body>
</html>

scripts.js

var newDiv = document.createElement("div");
    newDiv.innerHTML = "Name: ${names} Value: ${values}";
    document.body.appendChild(newDiv);
javascript node.js api server-side client-side
1个回答
0
投票

[您可以通过在app.js中添加创建div的代码来尝试

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  bodyData1 = JSON.parse(body);
  let name = bodyData.name;
  let value = bodyData.value;
  let newDiv = document.createElement("div");
    newDiv.innerHTML = "Name: ${names} Value: ${values}";
    document.body.appendChild(newDiv);

});
© www.soinside.com 2019 - 2024. All rights reserved.