Question

我在/home/myname/Desktop/iot/public/sensordata.txt位置有一个本地文本文件。在网页上单击按钮时，必须使用JavaScript读取此文件。我的代码如下：

<html>
    <head>
        <title>Humidity</title>
    </head>
    <body>
        <h3>Humidity page</h3>
        <table>
            <tr>
                <td>
                    <button type="button" onclick="humidgraph('public/sensordata.txt','chartContainer')">View live humidity data</button> 
                </td>
            </tr>
        </table>
        <p><div id="chartContainer" style="height: 300px;width= 100%;"></div></p>
        <script type="text/javascript">

            function humidgraph(datasource,divid){

                var i=0;
                var xVal,yVal;
                var humidity=[],time=[],dps=[];
                var fileread=false;
                var obj=document.getElementById(divid);

                if(window.XMLHttpRequest){
                    fileread=new XMLHttpRequest();
                }else if(window.ActiveXObject){
                    fileread=new ActiveXObject("Microsoft.XMLHTTP");
                }

                if(fileread){
                    fileread.open("GET",datasource);
                    document.getElementById("chartContainer").innerHTML=fileread.responseText;
                }
                fileread.onreadystatechange=function(){

                    if((fileread.readyState===4 || fileread.readyState===0) && fileread.status===200){

                        var text=fileread.responseText;
                        text.split(/\n/).forEach(function(item){
                            humidity.push(Number(item.match(/Humidity(.\d+[.]\d+)/)[1]));
                        });
                        text.split(/\n/).forEach(function(item){
                            time.push(Number(item.match(/time(.\d+[.]\d+)/)[1]));
                        });
                    }
                }

                while(i<time.length){
                    xVal=time[i];
                    yVal=humidity[i];
                    dps.push({x: xVal,y: yVal});
                    i++;
                }

            }
        </script>
    </body>
</html>

但是，即使正在使用innerHTML，也不会在html页面上打印数据。我的文件路径有问题吗？请帮忙。

Answer 1

您需要运行一个Web服务器并对该服务器上的URI发出get请求，而不是向文件发出get请求（您会收到“cross origin requests”错误）。

然后改变：

humidgraph('public/sensordata.txt','chartContainer')

阅读类似的内容：

humidgraph('http://localhost/public/sensordata.txt','chartContainer')

并且还需要从该服务器加载初始请求页面。

此外，您应按以下顺序执行请求：

fileread.onreadystatechange=function (){
   ...
};
...

fileread.open("GET", datasource);
fileread.send();

无法在Javascript中读取文本文件

1 个答案: