csv到动态html刷新答案

【问题标题】：csv to dynamic html refreshcsv到动态html刷新
【发布时间】：2021-06-07 23:03:30
【问题描述】：

我有一个我喜欢监控的后院锦鲤/金鱼池。我有一个树莓派进行监控并发送到我的网站。我正在尝试将 csv 数据加载到我的 index.html 文件中。我不需要保留数据。我有索引 3 创建了解析数据并放入表中。我很难理解如何将变量添加到 csv 字段并将该变量放入 html 文件中。

 <!DOCTYPE html>
<body bgcolor="000000">
<center>
<p style="color:White; font-size:50px; font-family:Couier;">Pond Temperature & Camera<br></p>


<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 30%;
padding: 1px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>


<div class="row">
<div class="column" style="background-color:#000000; color:white;">
 <h2>Bio Falls Temperature</h2>
 <p> &deg; F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
 <h2>Stream Temperature</h2>
 <p> &deg; F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
 <h2>Waterfall Temperature</h2>
 <p> &deg; F</p>    
</div>
<div class="column" style="background-color:#000000; color:white;">
 <h2>Deep End Temperature</h2>
 <p> &deg; F</p>    
</div>
<div class="column" style="background-color:#000000; color:white;">
 <h2>Skimmer Temperature</h2>
 <p> &deg; F</p>    
</div>
<div class="column" style="background-color:#000000; color:white;">
 <h2>Outside Air Temperature</h2>
 <p> &deg; F</p>    
</div>
</div>


<img id="jpeg_0" width="800" height="600">

<script type="text/javascript">
 var camera_0 = {
     addEvent: function(elem, event, func ){
         if (typeof (window.event) != 'undefined')
             {elem.attachEvent('on' + event, func);}
         else
             {elem.addEventListener(event, func, false);}
     },
     initCamera: function(jpeg, serverUrl, token, id, interval){
       this.addEvent(jpeg, 'load', function(){setTimeout(function() {camera_0.showJpegFrame(jpeg, serverUrl, token, id);}, interval);});
       this.showJpegFrame(jpeg, serverUrl, token, id);
     },
     showJpegFrame: function(jpeg, serverUrl, token, id){
         jpeg.src = serverUrl+"/Jpeg/"+id+"?authToken="+token+"&"+new Date().getTime();
     }
 }

camera_0.initCamera(jpeg_0, "http://100.6.115.166:8100", "4fbbf273-1691-428d-bd09-6b625aeafe0f", 0, 40);



</script>
</center>
 ```
 ```
<!DOCTYPE html>
<html>
<head>
<title>Pond Temperature & Camera</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
 <META HTTP-EQUIV="refresh" CONTENT="15">   
 <h1 align="center">Pond Temperature & Camera</h1>
 <br />

 <br />
 <div id="pond_table">
 </div>
</div>
</div>
</body>
</html>

<script>
$(document).ready(function(){

$.ajax({
url:"pond_temp.csv",
dataType:"text",
success:function(data)
{
 var pond_data = data.split(/\r?\n|\r/);
 var table_data = '<table class="table table-bordered table-striped">';
 for(var count = 0; count<pond_data.length; count++)
 {
  var cell_data = pond_data[count].split(",");
  table_data += '<tr>';
  for(var cell_count=0; cell_count<cell_data.length; cell_count++)
  {
   if(count === 0)
   {
    table_data += '<th>'+cell_data[cell_count]+'</th>';
   }
   else
   {
    table_data += '<td>'+cell_data[cell_count]+'</td>';
   }
  }
  table_data += '</tr>';
 }
 table_data += '</table>';
 $('#pond_table').html(table_data);
}
});
});



</script>
 ```
First probe temp is 66.4
Second probe temp is 66.2
Third probe temp is 65.4
Fourth probe temp is 66.5
Fifth probe temp is 65.5
 ```

【问题讨论】：

请在您的大代码转储中找出我们应该在哪里寻找问题。很有可能，我们不需要看到任何 CSS 声明。请减少您的问题，使其仅包含相关的代码部分。请参阅minimal reproducible example。这是一个python问题吗？一个php问题？一个javascript问题？ 需要更多关注问题？
您好，maserowik，您在上面的问题帖子中是否有一些示例数据可以从您的 CSV 中显示？另外，是否可以在您的问题中说明您要添加的变量是什么？ :)
从底部的 CSV 文件中，我希望将这些值自动添加到 www/n3bsq.com/pond。我已经创建了索引和表，只是试图让临时进入该位置。
您好，maserowik，您可以提供 CSV 数据文件中的示例行吗？从您上面的帖子信息中，我目前似乎看不到您的数据文件格式的示例。
68.9 68.8 68.9 69.3 70.1

标签： python php html

【解决方案1】：

在再次查看您的代码并再次查看您的帖子之后，下面的代码试图帮助您完成您想要做的事情，在这里。

需要注意的一些主要更改位于 HTML 部分中，其中包含“&deg F”部分。为了让您的程序知道将温度数据放在 HTML 中的哪个位置，我添加了一些 id 标签，其名称与各种温度相匹配。

以第一个温度为例，修改后的 HTML 如下所示：

<div class="column" style="background-color:#000000; color:white;">
  <h2>Bio Falls Temperature</h2>
  <p id="bio_falls_temp"></p>
</div>

另一个主要变化领域是代码的$(document).ready(function(){ ... }); 部分。我在该部分中添加了 cmets 以帮助解释那里发生的事情。基本上，代码循环通过您传入的数据文件，假设数据看起来像您的数据示例（最后有一个额外的温度），如下所示：

68.9 68.8 68.9 69.3 70.1 80.1

如果您的数据文件实际上是用逗号而不是空格分隔的，请确保在下面的示例代码中更改此行：

let pond_data_parts = pond_data[i].split(' ');

到这里：

let pond_data_parts = pond_data[i].split(',');

新的/调整后的代码循环遍历数据文件的每一行，然后循环遍历一行数据中的每个温度数据项。如果您的数据文件中有多行数据，则此代码方法会遍历每一行，我认为数据文件中的最后一行数据将最后显示（然后保留）在您的 HTML 温度“表”中。

最后，要注意的新代码的另一部分是温度数据值实际放置在 HTML 温度“表”中的部分。这尤其是在相关循环中使用以下代码行来完成的：

// Find element in HTML where temperature data will be placed
let item = document.querySelector('#' + pond_data_var_names[j]);
// Put temperature data in HTML along with "&deg F" part
item.innerHTML = pond_data_parts[j] + ' &deg F';

使用document.querySelector() 选择的实际id 值在前面的代码中列出：

let pond_data_var_names = [
  'bio_falls_temp',
  'stream_temp',
  'waterfall_temp',
  'deep_end_temp',
  'skimmer_temp',
  'outside_air_temp'
];

这些都是循环的，结果温度数据在 HTML 温度“表”中设置为：

item.innerHTML = pond_data_parts[j] + ' &deg; F';

如果温度没有显示在 HTML 温度“表”的正确位置，您可能需要重新排列 pond_data_var_names 区域中的项目顺序。我只是对这个代码示例采用了一种简单的方法，并假设数据文件中的数据值从左到右，从生物瀑布温度开始，然后是溪流温度，然后是瀑布温度，然后是深端温度，然后是分离器温度，然后是室外气温。

除了我回顾的添加/更改之外，我还重新排列了您的一些 HTML，以便有一个合并的 <head></head> 部分，并将您的两个示例 HTML 文件中的一些代码合并到您的原始帖子中代码。一般也格式化了代码，但如果需要，您可以更改它。

根据您的代码，我的代码尝试结果如下所示：

<!DOCTYPE html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <style>
  * {
  box-sizing: border-box;
  }

  /* Create three equal columns that floats next to each other */
  .column {
  float: left;
  width: 30%;
  padding: 1px;
  }

  /* Clear floats after the columns */
  .row:after {
  content: "";
  display: table;
  clear: both;
  }
  </style>
</head>
<body bgcolor="000000">
  <center>
  <p style="color:White; font-size:50px; font-family:Couier;">Pond Temperature & Camera<br></p>

  <div class="row">
    <div class="column" style="background-color:#000000; color:white;">
      <h2>Bio Falls Temperature</h2>
      <p id="bio_falls_temp"></p>
    </div>
    <div class="column" style="background-color:#000000; color:white;">
      <h2>Stream Temperature</h2>
      <p id="stream_temp"></p>
    </div>
    <div class="column" style="background-color:#000000; color:white;">
      <h2>Waterfall Temperature</h2>
      <p id="waterfall_temp"></p>
    </div>
    <div class="column" style="background-color:#000000; color:white;">
      <h2>Deep End Temperature</h2>
      <p id="deep_end_temp"></p>
    </div>
    <div class="column" style="background-color:#000000; color:white;">
      <h2>Skimmer Temperature</h2>
      <p id="skimmer_temp"></p>
    </div>
    <div class="column" style="background-color:#000000; color:white;">
      <h2>Outside Air Temperature</h2>
      <p id="outside_air_temp"></p>
    </div>
  </div>

  <img id="jpeg_0" width="800" height="600">

  <script type="text/javascript">
    var camera_0 = {
      addEvent: function(elem, event, func ) {
        if (typeof (window.event) != 'undefined') {
          elem.attachEvent('on' + event, func);
        } else {
          elem.addEventListener(event, func, false);
        }
      },
      initCamera: function(jpeg, serverUrl, token, id, interval) {
        this.addEvent(jpeg, 'load', function() {
          setTimeout(function() {
            camera_0.showJpegFrame(jpeg, serverUrl, token, id);
          }, interval);
        });
        this.showJpegFrame(jpeg, serverUrl, token, id);
      },
      showJpegFrame: function(jpeg, serverUrl, token, id) {
        jpeg.src = serverUrl+"/Jpeg/"+id+"?authToken="+token+"&"+new Date().getTime();
      }
    }

    camera_0.initCamera(jpeg_0, "http://100.6.115.166:8100", "4fbbf273-1691-428d-bd09-6b625aeafe0f", 0, 40);

    // These items are used later to specify where data should be put in HTML
    let pond_data_var_names = [
      'bio_falls_temp',
      'stream_temp',
      'waterfall_temp',
      'deep_end_temp',
      'skimmer_temp',
      'outside_air_temp'
    ];

    $(document).ready(function(){
      $.ajax({
        url: "pond_temp.csv",
        dataType: "text",
        success: function(data) {
          // Split data file line by line
          let pond_data = data.split(/\r?\n|\r/);
          // Remove empty row if found
          if (pond_data[pond_data.length-1] == "") {
            pond_data.pop();
          }
          // Loop through lines from data file
          for (let i = 0; i < pond_data.length; ++i) {
            // Split up line of data using space as delimiter
            let pond_data_parts = pond_data[i].split(' ');

            // Loop through each item from line of data
            for (let j = 0; j < pond_data_parts.length; ++j) {
              // Find element in HTML where temperature data will be placed
              let item = document.querySelector('#' + pond_data_var_names[j]);
              // Put temperature data in HTML along with "&deg; F" part
              item.innerHTML = pond_data_parts[j] + ' &deg; F';
            }
          }
        }
      });
    });
  </script>
  </center>
</body>
</html>

我使用了一个测试 pond_temp.csv 文件，其中包含您提供的以下数据作为示例（在末尾添加 80.1 以填充剩余的 HTML 温度“表格”单元格）：

68.9 68.8 68.9 69.3 70.1 80.1

这是我这边的输出：

我希望这对您的项目有所帮助！

更新：

为了刷新传入的池塘数据温度，您可以使用the setInterval() method，它应该每“n”毫秒运行一次。

例如，如果您希望每 5 秒刷新一次数据，那么前面代码示例的结尾部分可能如下所示：

    function getPondDataAndDisplay() {
      $.ajax({
        url: "pond_temp.csv",
        dataType: "text",
        success: function(data) {
          // Split data file line by line
          let pond_data = data.split(/\r?\n|\r/);
          // Remove empty row if found
          if (pond_data[pond_data.length-1] == "") {
            pond_data.pop();
          }
          // Loop through lines from data file
          for (let i = 0; i < pond_data.length; ++i) {
            // Split up line of data using space as delimiter
            let pond_data_parts = pond_data[i].split(' ');

            // Loop through each item from line of data
            for (let j = 0; j < pond_data_parts.length; ++j) {
              // Find element in HTML where temperature data will be placed
              let item = document.querySelector('#' + pond_data_var_names[j]);
              // Put temperature data in HTML along with "&deg; F" part
              item.innerHTML = pond_data_parts[j] + ' &deg; F';
            }
          }
        }
      });
    }

    // ref: https://developer.mozilla.org/en-US/docs/Web/API
    //   /WindowOrWorkerGlobalScope/setInterval
    let pondDataInterval = window.setInterval(getPondDataAndDisplay, 5000);

我将早期代码的ajax 部分放在了自己的函数getPondDataAndDisplay() 中。然后，您可以使用window.setInterval(getPondDataAndDisplay, 5000); 调用新函数并每 5 秒运行一次。

此外，对于本示例，我还删除了包围 ajax 部分代码的 $(document).ready(function(){ ... }); 部分。

注意：不过，对于传入的数据文件，需要牢记的是，它可能会在一段时间后变成一个大文件（随着时间的推移收集所有池塘温度数据）。自己制作数据文件的副本（将其保存到另一个位置）可能是个好主意，然后在某些时候清除传入的数据文件以使文件数据保持较小。

【讨论】：

我还有一个问题。我知道我可以将以下添加到代码中，但这会刷新整个页面。它们是发出刷新表的更好方法吗？摄像机 24/7 全天候直播。
@maserowik，我已经更新了我之前的答案，其中可能对您的其他问题有所帮助，并且还添加了要考虑的额外注释。希望对您有所帮助！