Question

我试图创建一个应用程序来抓取用户正在使用刮刀收听的歌曲。现在我可以让用户访问该页面并查看正在收听的歌曲标题，但如果歌曲更新，他们将需要自己刷新整个页面。我正在寻找一种方法来运行路径文件中的代码，然后使用歌曲数据渲染页面，然后立即检查数据是否已更改，然后使用新数据刷新页面部分。

这就是我想要发生的事情：

用户将GET发送到/ songinfo。
app.get从外部来源抓取数据。
app.get使用歌曲数据呈现ejs文件
定时器关闭/用户按下页面本身的手动刷新按钮
新数据呈现在页面上，而网站的其余部分不会刷新。只刷新歌曲数据。

感谢。

Answer 1

您需要使用ajax。

您可以在nodejs服务器上创建一个新路由，将歌曲数据作为json返回，而不是将EJS文件呈现给客户端。

想象一下，您的代码目前是这样的：

app.get('/songinfo', function(req, res) {
  request.get('http://songinfo.com/songs', function(err, res, data) {
    res.render('songinfo.ejs', data);
  });
});

您可以将其更改为以下内容：

function getSongInfo(callback) {
  request.get('http://songinfo.com/songs', function(err, res, data) {
    callback(data);
  });
}

app.get('/songinfo', function(req, res) {
  getSongInfo(function(data) {
    res.render('songinfo.ejs', data);
  });
});

app.get('/raw-songinfo', function(req, res) {
  getSongInfo(function(data) {
    res.setHeader('content-type', 'application/json');
    res.send(data);
  });
});

我在这里完成的工作是提取getSongInfo逻辑以保留我们的应用DRY，并添加第二条也使用该功能的路由，而不是在ejs中发回数据文件，在json中发回。现在，在您的ejs文件中，您可以添加用于调用此路由的逻辑：

<button onclick='reloadData()'> Reload me! </button>
<script type='text/javascript'> 
  function reloadData() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
        if(xmlhttp.status == 200){
          // Update the data in your app somehow...
          // example:
          var responseData = JSON.parse(xmlhttp.responseText);
          document.getElementById('songs-count').innerHTML = responseData.length;
        } else {
          alert('something went wrong!');
        }
      }
    }
  }
</script>

使用node.js后端的新数据更新网页的一部分

1 个答案: