我已经让我的html每60秒自动刷新一次,但它需要按钮再次按下,我宁愿放弃按钮,让它的效果在html运行时自动发生。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="60">
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#load_data').click(function () {
$.ajax({
url: "employee.csv",
dataType: "text",
success: function (data) {
var employee_data = data.split(/r?n|r/);
var table_data = '<table class="table table-bordered table-striped">';
for (var count = 0; count < employee_data.length; count++) {
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
if (count === 0) {
table_data += '<th>' + cell_data[cell_count] + '</th>';
}
else {
table_data += '<td>' + cell_data[cell_count] + '</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
它不允许我不添加更多内容就提交,不确定还可以添加什么,csv文件的内容会定期更改,所以这就是为什么网站需要自动刷新。
<script>
$(document).ready(function () {
$.ajax({
url: "employee.csv",
dataType: "text",
success: function (data) {
var employee_data = data.split(/r?n|r/);
var table_data = '<table class="table table-bordered table-striped">';
for (var count = 0; count < employee_data.length; count++) {
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
if (count === 0) {
table_data += '<th>' + cell_data[cell_count] + '</th>';
}
else {
table_data += '<td>' + cell_data[cell_count] + '</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
</script
可以使用setInterval在javascript文件中。确保ajax调用在函数内部,这样您就不必重新编写代码。
例如
function autoload(){
//your ajax call here..}
那么你可以这样命名
setInterval(autoload,3000) //convert 60 seconds to milliseconds