我会用三个独立的部分来做:
- 用户端的文件。
纯 HTML 和 JS - 您只需通过 jQuery ajax 连接到服务器上的 php 文件即可检索 .txt 文件的内容:
let yourData;
function waitForMsg(){
//get your Data from the Server
$.ajax({
type: "GET",
url: "getData.php",
async: true,
cache: false,
timeout:50000,
success: function(data){
yourData = (data);
renderStuff();
ractive.update();
setTimeout(
waitForMsg,
15000
);
}
});
};
- 服务器上的文件
在您的服务器上,您在 getData.php 中获取数据:
<?php
$lines = file_get_contents("myData.txt"); //gives you the Data as Array for easier handling
echo ($lines);
?>
- 更新用户视图中的数据
我会使用 ractive.js 来呈现 html 中的数据而不重新加载它,但可能还有其他十几种方法:
function renderStuff() {
const template = "{{#Data}}<tr><td>harcoded</td><td>harcoded</td><td>{{date}}</td>{{time}}</td></tr>{{/Data}}";
ractive = new Ractive({
el: '#target',
template: template,
modifyArrays: true,
data: {yourData},
computed: {
Data() {
let tempdoc = this.get('kinderchen');
for (let x of tempdoc) {
//do something with your Data to make it more readable. I'd assume building a JSON out of it
//so it's something like: [{'date':'12/12/12'}, {'time':'15:22'}, ...]
}
return tempdoc;
}
}
});
}
当然,这是一个非常简短的示例,需要进行一些更改才能工作,但这是一种开始方式。