Javascript 基于外部CSV数据创建动态网页_Javascript_Html_Dynamic

Javascript 基于外部CSV数据创建动态网页

javascript html dynamic

Javascript 基于外部CSV数据创建动态网页,javascript,html,dynamic,Javascript,Html,Dynamic,我有一个半动态HTML网页，以半小时的固定频率显示一些数据（即典型的股票市场报价）。目前，我使用新数据手动创建HTML页面的新版本，并将其部署在我的服务器（AmazonAWS）中使用这种方法，用户需要手动刷新网页以查看更新的数据我想通过以下方案使我的网页完全动态：我将创建一个CSV文件，每半小时更新一次，并在服务器中部署该CSV文件（我不想依赖任何标准数据库来避免额外的成本）我的HTML页面应持续查看此CSV，并在CSV文件更新时自动显示新数据用户应该能够在不进行任何刷新的情况下查看新

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

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

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

我将创建一个CSV文件，每半小时更新一次，并在服务器中部署该CSV文件（我不想依赖任何标准数据库来避免额外的成本）

我的HTML页面应持续查看此CSV，并在CSV文件更新时自动显示新数据

用户应该能够在不进行任何刷新的情况下查看新数据

我遇到过各种各样的web建议，但是所有这些建议都建议基于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>


我的HTML文件
函数getData（）{
设定间隔(
函数（）{
var csvUrl=http://www.sample-videos.com/csv/Sample-Spreadsheet-10-rows.csv';
//初始化Ajax对象
var ajax=new-XMLHttpRequest（）；
//将GET请求设置为指向CSV文件的URL
open（'GET'，csvUrl）；
//设置浏览器收到CSV后将执行的操作
ajax.onreadystatechange=函数（）{
if（ajax.readyState==XMLHttpRequest.DONE&&ajax.status==200）{
//请求成功
var csvData=ajax.responseText；
//在这里用这些数据做点什么
}
}
//发送请求
ajax.send（）；
},
10000);
}
苹果当前报价：175.550
简柏特当前报价：31.99

不幸的是，它什么也没显示

问题:

我走对方向了吗

根据下载的CSV中的某些单元格值，需要如何更改Apple和简柏特代码

谢谢您的时间。

2018年2月25日更新
下面是一个简单的片段，应该可以帮助您继续。我真的结束了所有的结尾，并在几乎每一行代码之前都添加了注释，以便您可以从中学习
我的工作假设是您的CSV如下所示：

Apple, 175.5 IBM, 155.4 MGTI, 2.24
否则，您需要相应地更新代码
我想你可能想做一些更复杂的事情，但我只是给了你一点时间来展示你在问题中要求的东西。我希望这能帮助你理解并到达你的最终目的地

//更改您的URL（必须具有访问控制Allow Origin头才能允许CORS） var csvUrl=https://gist.githubusercontent.com/zbone3/96de8a3a836a8d93e7e9f3c3b34667b0/raw/6fdd7a6708cc07bda7fd052fe6f706ad7ac632f4/sample_csv.csv'; 函数handleCSVResult（csvString）{ //获取要将数据附加到的div元素 var dataArea=document.querySelector（'csv#u data'）； //将csv拆分为行 var rows=csvString.split（'\n'）； var htmlStr=''； //迭代每一行对于（变量i=0；i '； } //将CSV生成的字符串设置为专用div的HTML dataArea.innerHTML=htmlStr； } //初始化Ajax对象 var ajax=new-XMLHttpRequest（）； //将GET请求设置为指向CSV文件的URL open（'GET'，csvUrl）； //设置浏览器收到CSV后将执行的操作 ajax.onreadystatechange=函数（）{ if（ajax.readyState==XMLHttpRequest.DONE&&ajax.status==200）{ //请求成功 var csvData=ajax.responseText； //在这里用这些数据做点什么 handleCSVResult（csvData）； } } //发送请求 ajax.send（） //更改您的URL（必须具有访问控制Allow Origin头才能允许CORS） var csvUrl=https://gist.githubusercontent.com/zbone3/96de8a3a836a8d93e7e9f3c3b34667b0/raw/6fdd7a6708cc07bda7fd052fe6f706ad7ac632f4/sample_csv.csv'; 函数handleCSVResult（csvString）{ //获取要将数据附加到的div元素 var dataArea=document.querySelector（'csv#u data'）； //将csv拆分为行 var rows=csvString.split（'\n'）； var htmlStr=''； //迭代每一行对于（变量i=0；i '； } //将CSV生成的字符串设置为专用div的HTML dataArea.innerHTML=htmlStr； } //初始化Ajax对象 var ajax=new-XMLHttpRequest（）； //将GET请求设置为指向CSV文件的URL open（'GET'，csvUrl）； //设置浏览器收到CSV后将执行的操作 ajax.onreadystatechange=函数（）{ if（ajax.readyState==XMLHttpRequest.DONE&&ajax.status==200）