Question

我有一个半动态HTML网页，它以半小时的常规频率显示一些数据（即典型的股票市场报价）。目前，我手动使用新数据创建我的HTML页面的新版本，并将其部署在我的服务器（Amazon AWS）中。

使用此方法，用户需要手动刷新网页以查看更新的数据。

我想通过以下方案使我的网页完全动态：

我将创建一个CSV文件，我将每半小时更新一次，并将该CSV文件部署到服务器中（我不想依赖任何标准数据库以避免额外费用）
我的HTML页面应该持续查看此CSV并在CSV文件更新时自动显示新数据
用户应该能够在没有任何刷新的情况下查看新数据。

我遇到过各种网络建议，但他们都建议基于JS代码更新网页，但是，数据只是由那些JS代码随机创建的 - 即不依赖任何外部数据。

有人可以建议如何最动态地实现上述方案吗？

感谢您的时间

*我收到Z-Bone *

<html>
<head>
    <title>
    My HTML file
    </title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>


        function getData() {
            setInterval(
                function() { 
                    var csvUrl = 'http://www.sample-videos.com/csv/Sample-Spreadsheet-10-rows.csv';
                    // Init Ajax Object
                    var ajax = new XMLHttpRequest();

                    // Set a GET request to the URL which points to your CSV file
                    ajax.open('GET', csvUrl);

                    // Set the action that will take place once the browser receives your CSV
                    ajax.onreadystatechange = function() {
                        if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {
                            // Request was successful
                            var csvData = ajax.responseText;

                            // Do something with that data here


                        }
                    }

                    // Send request
                    ajax.send();

                },
                10000);
        }
    </script>

</head>


<body onload="javascript:getData()">
    <p>Current quote of Apple : 175.550</p>
    <p>Current quote of Genpact : 31.99</p>

</body>
</html>

不幸的是它什么也没显示

问题：

我向正确的方向前进了吗？
根据下载的CSV中的某些单元格值更改Apple和Genpact代码需要做什么？

感谢您的时间。

Answer 1

更新25/02/2018

这是一个简单的片段，应该让你去。我真的关闭了所有目的，并在几乎每行代码之前发表评论，以便您可以从中学习。

我的工作假设是您的CSV看起来如下所示：

Apple, 175.5
IBM, 155.4
MGTI, 2.24

否则，您需要相应地更新代码。

我认为你想要实现一些更复杂的东西，但我只是给你一个简单的显示你在问题中要求的东西。我希望这有助于您了解并到达最终目的地。

// Change to your URL (Must have Access-Control-Allow-Origin header to allow CORS)
var csvUrl = 'https://gist.githubusercontent.com/zbone3/96de8a3a836a8d93e7e9f3c3b34667b0/raw/6fdd7a6708cc07bda7fd052fe6f706ad7ac632f4/sample_csv.csv';


function handleCSVResult(csvString) {
  // Get the div element to append the data to
  var dataArea = document.querySelector('#csv_data');
  
  // Split csv to rows
  var rows = csvString.split('\n');
  
  var htmlStr = '';
  
  // Iterate over each row
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    
    // split row to cells
    var cells = row.split(',');
    
    // Extract data from cell 1 and 2 of current row
    var companyName = cells[0];
    var stockPrice = cells[1];
    
    // Add extracted CSV data to string
    htmlStr += '<p>Quote for ' + companyName + ': ' + stockPrice + '</p><br>';
  }
  
  // Set the string generated from CSV as HTML of the dedicated div
  dataArea.innerHTML = htmlStr;
}

// Init Ajax Object
var ajax = new XMLHttpRequest();

// Set a GET request to the URL which points to your CSV file
ajax.open('GET', csvUrl);

// Set the action that will take place once the browser receives your CSV
ajax.onreadystatechange = function() {
  if (ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {
    // Request was successful
    var csvData = ajax.responseText;

    // Do something with that data here
    handleCSVResult(csvData);
  }
}

// Send request
ajax.send();

<div id="csv_data">

<div>

AJAX是你的朋友。

您可以使用以下内容：

var csvUrl = 'https://yourserver.com/path/to/csvfile.csv';

// Init Ajax Object
var ajax = new XMLHttpRequest();

// Set a GET request to the URL which points to your CSV file
ajax.open('GET', csvUrl);

// Set the action that will take place once the browser receives your CSV
ajax.onreadystatechange = function() {
    if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {
        // Request was successful
        var csvData = ajax.responseText;

        // Do something with that data here

    }
}

// Send request
ajax.send();

这样，每当刷新页面时，ajax请求将异步发送到服务器并检索最新的csv文件。您可以获取该数据并在页面中显示它。

此外，您还可以在CSV文件中不断检查服务器的更新，而无需用户刷新页面。例如，您可以使用setInterval在您选择的每个时间间隔执行此检查。 setInterval只会运行上面的代码。

Answer 2

$request->subdomain

// Change to your URL (Must have Access-Control-Allow-Origin header to allow CORS)
var csvUrl = 'https://gist.githubusercontent.com/zbone3/96de8a3a836a8d93e7e9f3c3b34667b0/raw/6fdd7a6708cc07bda7fd052fe6f706ad7ac632f4/sample_csv.csv';


function handleCSVResult(csvString) {
  // Get the div element to append the data to
  var dataArea = document.querySelector('#csv_data');
  
  // Split csv to rows
  var rows = csvString.split('\n');
  
  var htmlStr = '';
  
  // Iterate over each row
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    
    // split row to cells
    var cells = row.split(',');
    
    // Extract data from cell 1 and 2 of current row
    var companyName = cells[0];
    var stockPrice = cells[1];
    
    // Add extracted CSV data to string
    htmlStr += '<p>Quote for ' + companyName + ': ' + stockPrice + '</p><br>';
  }
  
  // Set the string generated from CSV as HTML of the dedicated div
  dataArea.innerHTML = htmlStr;
}

// Init Ajax Object
var ajax = new XMLHttpRequest();

// Set a GET request to the URL which points to your CSV file
ajax.open('GET', csvUrl);

// Set the action that will take place once the browser receives your CSV
ajax.onreadystatechange = function() {
  if (ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {
    // Request was successful
    var csvData = ajax.responseText;

    // Do something with that data here
    handleCSVResult(csvData);
  }
}

// Send request
ajax.send();

根据外部CSV

2 个答案: