Question

我目前正在开发一个节点/快递应用程序，它显示了有关ISS的几个信息。我正在使用NASA共享的API返回JSON数据。

我希望使用EJS在我的页面上动态更新数据，而无需刷新它。让我们说每1000毫秒。

这是我获取ISS当前经度和纬度的实际代码：

服务器端：

app.get("/iss", function(req, res){
   var url = "http://api.open-notify.org/iss-now.json";
   request(url, function(err, response, body){
       if (!err && response.statusCode == 200){
          var data = JSON.parse(body);
          res.render("ISS", {data: data});
       }
   });
});

客户方：

<div class="ui main text inverted container segment">
    <div class="ui huge header">Where is the ISS ?</div>
    <p>Longitude : <%= data["iss_position"].longitude %> </p>
    <p>Latitude : <%= data["iss_position"].latitude %> </p>
</div>

我听说过Socket.io，但我不知道它是否会根据我的需要进行优化。另外，我可以使用setInterval()函数让它工作吗？如果是的话，你可以帮我吗？

感谢您的帮助。

Answer 1

针对iss端点的示例api调用

app.get("/iss", function(req, res){
       var url = "http://api.open-notify.org/iss-now.json";
       request(url, function(err, response, body){
           if (!err && response.statusCode == 200){
              var data = JSON.parse(body);
              res.send(data);
           }
       });
    });

客户端代码 -

<div class="ui main text inverted container segment">
    <div class="ui huge header">Where is the ISS ?</div>
    <p>Longitude :<span id="longitude"> <%= data["iss_position"].longitude %> </span></p>
    <p>Latitude : <%= data["iss_position"].latitude %> </p>
</div>

假设您正在使用jQuery

<script>
 $.ajax({
   "url":<base_url>+"/iss",
   "success":function(data){
      $("#longitude").html(data.iss_position.longitude);
   },
   "error":function(error){
   //handle error here
   }
})
</script>

我希望使用EJS在我的页面上动态更新数据，无需刷新它。让我们说每1000毫秒。

您可能需要使用setInterval调用Ajax函数来更新每1000ms发送一次请求

setInterval的代码

<script>

setInterval(function(){

     $.ajax({
       "url":<base_url>+"/iss",
       "success":function(data){
          $("#longitude").html(data.iss_position.longitude);
       },
       "error":function(error){
       //handle error here
       }
    })

}, 1000);

</script>

$(document).ready(function() {

  setInterval(function() {
    $.ajax({
      "url": "http://api.open-notify.org/iss-now.json",

      "success": function(data) {
        $("#longitude").html(data.iss_position.longitude);
      },
      "error": function(error) {
        console.log(error);
      }
    })
  }, 1000);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="longitude">
</span>

您可以查看上面的代码段并查看经度更新。

如何动态刷新EJS标记中的JSON数据

1 个答案: