根据外部CSV数据创建动态网页

Question

I have a semi-dynamic HTML webpage which displays some data (ie a typical stock market quote) at regular frequency of Half hour.我有一个半动态 HTML 网页，它以半小时的固定频率显示一些数据（即典型的股票市场报价）。 Currently I manually create a new version of my HTML page with new data and deploy it in my server (Amazon AWS).目前，我使用新数据手动创建 HTML 页面的新版本，并将其部署在我的服务器 (Amazon AWS) 中。

With this approach, User needs to manually refresh the Webpage to see updated data.使用这种方法，用户需要手动刷新网页才能看到更新的数据。

I want to make my Webpage completely dynamic with below scheme :我想使用以下方案使我的网页完全动态：

I will create a CSV file, which I will update in every half hour and deploy that CSV file in server (I do not want to depend on any standard DB to avoid additional cost)我将创建一个 CSV 文件，我将每半小时更新一次并将该 CSV 文件部署在服务器中（我不想依赖任何标准数据库以避免额外成本）
My HTML page should continuously look into this CSV and automatically display new data if that CSV file is updated如果 CSV 文件更新，我的 HTML 页面应不断查看此 CSV 并自动显示新数据
User should be able to see new Data without any refreshing.用户应该能够在没有任何刷新的情况下看到新数据。

I have come across various web-advises however all of them suggest to update Web page based on JS code, however, data are created randomly by those JS code only - ie no dependency on any external data.我遇到过各种网络建议，但它们都建议基于 JS 代码更新网页，但是，数据仅由这些 JS 代码随机创建 - 即不依赖于任何外部数据。

Can someone suggest how to achieve above scheme most dynamically?有人可以建议如何最动态地实现上述方案吗？

Thanks for your time谢谢你的时间

* My try after I received feedback from Z-Bone * * 收到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>

Unfortunately it displays nothing不幸的是它什么也没显示

Question :问题：

Am I moving to right direction?我在朝着正确的方向前进吗？
What is need to do to change the Apple and Genpact codes based on some cell values in downloaded CSV?根据下载的 CSV 中的某些单元格值更改 Apple 和 Genpact 代码需要做什么？

Thanks for your time.谢谢你的时间。

Answer 1

UPDATE 25/02/2018更新 25/02/2018

Here is a simple snippet that should get you going.这是一个简单的片段，应该可以帮助您前进。 I really closed all ends and put a comment before almost each line of code so that you can learn from it.我真的关闭了所有端并在几乎每一行代码之前添加了注释，以便您可以从中学习。

My working assumption is that your CSV looks something like as follows:我的工作假设是您的 CSV 如下所示：

Apple, 175.5
IBM, 155.4
MGTI, 2.24

Otherwise, you'll need to update the code accordingly.否则，您需要相应地更新代码。

I assume you'd like to achieve something a bit more sophisticated, but I just gave you the bare minumum to display what you asked for in your question.我假设您想要实现更复杂的东西，但我只是给了您显示您在问题中要求的最低限度。 I hope this helps you understand and get to your final destination.我希望这可以帮助您了解并到达最终目的地。

 // 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 is your friend. AJAX 是您的朋友。

You can use something like the following:您可以使用以下内容：

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();

This way, whenever the page is refreshed, an ajax request will be sent asynchornously to the server and retrieve the most up-to-date csv file.这样，无论何时刷新页面，ajax 请求都会异步发送到服务器并检索最新的 csv 文件。 You can take that data and display it as you wish in the page.您可以获取该数据并根据需要在页面中显示它。

Furthermore, you are also able to continously check the server for updates in the CSV file, without the user refreshing the page.此外，您还可以在 CSV 文件中不断检查服务器的更新，而无需用户刷新页面。 For example, you can use setInterval for this check to be performed every interval you choose.例如，您可以使用setInterval来执行此检查，以便在您选择的每个时间间隔执行。 The setInterval would simply run the code above. setInterval将简单地运行上面的代码。

Answer 2

 // 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>

根据外部CSV数据创建动态网页

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-02-24 18:10:52

解决方案2
0 2020-04-19 21:49:59

根据外部CSV数据创建动态网页

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-02-24 18:10:52

解决方案2 0 2020-04-19 21:49:59

解决方案1
1 已采纳 2018-02-24 18:10:52

解决方案2
0 2020-04-19 21:49:59