要求输入饮水量的数据可以把数据在表格上显示并保存。需要哪些代码
时间: 2024-04-30 07:24:07 浏览: 74
水通量数据计算处理代码
这需要用到一些前端技术和后端技术。
前端技术:HTML、CSS、JavaScript、jQuery等。
后端技术:PHP、MySQL等。
以下是实现该功能所需的一些代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饮水量统计</title>
</head>
<body>
<h1>饮水量统计</h1>
<form id="waterForm">
<label for="date">日期:</label>
<input type="date" id="date" name="date"><br><br>
<label for="amount">饮水量(毫升):</label>
<input type="number" id="amount" name="amount"><br><br>
<button type="submit">提交</button>
</form>
<hr>
<h2>饮水量统计表</h2>
<table id="waterTable">
<thead>
<tr>
<th>日期</th>
<th>饮水量(毫升)</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>
```
CSS代码:
```css
table {
border-collapse: collapse;
width: 50%;
margin: auto;
}
th, td {
border: 1px solid black;
padding: 5px;
text-align: center;
}
thead {
background-color: #ccc;
}
button {
margin-left: 10px;
}
```
JavaScript代码:
```javascript
$(document).ready(function() {
// 获取表单元素和表格元素
var waterForm = $('#waterForm');
var waterTable = $('#waterTable');
// 提交表单时执行的操作
waterForm.submit(function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var formData = waterForm.serialize(); // 获取表单数据
$.ajax({
url: 'save_water.php', // 后端接口地址
type: 'POST',
data: formData,
success: function(result) {
if (result === 'success') {
// 保存成功,清空表单并刷新表格数据
waterForm[0].reset();
loadWaterData();
} else {
alert('保存失败,请重试!');
}
},
error: function() {
alert('保存失败,请检查网络连接!');
}
});
});
// 加载表格数据
function loadWaterData() {
$.ajax({
url: 'load_water.php', // 后端接口地址
type: 'GET',
dataType: 'json',
success: function(data) {
// 清空表格数据
waterTable.find('tbody').empty();
// 遍历数据,生成表格行并添加到表格中
$.each(data, function(index, item) {
var row = $('<tr>');
row.append($('<td>').text(item.date));
row.append($('<td>').text(item.amount));
waterTable.find('tbody').append(row);
});
},
error: function() {
alert('加载失败,请检查网络连接!');
}
});
}
// 页面加载时,加载表格数据
loadWaterData();
});
```
PHP代码(保存数据):
```php
<?php
// 连接数据库
$host = 'localhost';
$username = 'root';
$password = '';
$database = 'test';
$conn = mysqli_connect($host, $username, $password, $database);
if (!$conn) {
die('连接数据库失败:' . mysqli_connect_error());
}
// 获取表单数据
$date = $_POST['date'];
$amount = $_POST['amount'];
// 插入数据
$sql = "INSERT INTO water (date, amount) VALUES ('$date', '$amount')";
if (mysqli_query($conn, $sql)) {
echo 'success';
} else {
echo 'fail';
}
// 关闭数据库连接
mysqli_close($conn);
?>
```
PHP代码(加载数据):
```php
<?php
// 连接数据库
$host = 'localhost';
$username = 'root';
$password = '';
$database = 'test';
$conn = mysqli_connect($host, $username, $password, $database);
if (!$conn) {
die('连接数据库失败:' . mysqli_connect_error());
}
// 查询数据
$sql = "SELECT * FROM water ORDER BY date DESC";
$result = mysqli_query($conn, $sql);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
// 返回JSON格式数据
header('Content-Type: application/json');
echo json_encode($data);
// 关闭数据库连接
mysqli_close($conn);
?>
```
以上代码实现了一个简单的饮水量统计功能,可以将用户输入的数据保存到MySQL数据库中,并在页面上显示出来。但是需要注意的是,这只是一个初步的实现,还有很多细节和安全性需要进一步优化和完善。
阅读全文