前端页面,调用后端增删改查接口代码
时间: 2024-05-08 14:17:18 浏览: 12
以下是一个简单的前端页面,调用后端增删改查接口的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>Example</h1>
<!-- 查询数据 -->
<button id="queryBtn">查询</button>
<!-- 添加数据 -->
<label for="nameInput">名称:</label>
<input type="text" id="nameInput">
<button id="addBtn">添加</button>
<!-- 修改数据 -->
<label for="idInput">ID:</label>
<input type="text" id="idInput">
<label for="nameInput2">名称:</label>
<input type="text" id="nameInput2">
<button id="updateBtn">修改</button>
<!-- 删除数据 -->
<label for="idInput2">ID:</label>
<input type="text" id="idInput2">
<button id="deleteBtn">删除</button>
<!-- 数据展示 -->
<table id="dataTbl">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
$(function() {
// 查询数据
$('#queryBtn').click(function() {
$.ajax({
url: '/api/data',
type: 'GET',
success: function(data) {
$('#dataTbl tbody').empty();
$.each(data, function(i, item) {
var tr = $('<tr>').appendTo('#dataTbl tbody');
$('<td>').text(item.id).appendTo(tr);
$('<td>').text(item.name).appendTo(tr);
});
}
});
});
// 添加数据
$('#addBtn').click(function() {
var name = $('#nameInput').val();
$.ajax({
url: '/api/data',
type: 'POST',
data: {name: name},
success: function() {
$('#queryBtn').click();
$('#nameInput').val('');
}
});
});
// 修改数据
$('#updateBtn').click(function() {
var id = $('#idInput').val();
var name = $('#nameInput2').val();
$.ajax({
url: '/api/data/' + id,
type: 'PUT',
data: {name: name},
success: function() {
$('#queryBtn').click();
$('#idInput').val('');
$('#nameInput2').val('');
}
});
});
// 删除数据
$('#deleteBtn').click(function() {
var id = $('#idInput2').val();
$.ajax({
url: '/api/data/' + id,
type: 'DELETE',
success: function() {
$('#queryBtn').click();
$('#idInput2').val('');
}
});
});
});
</script>
</body>
</html>
```
这个页面中,我们使用了 jQuery 库来简化 AJAX 请求的代码。页面上有查询、添加、修改、删除四个按钮,每个按钮对应一个 AJAX 请求,分别调用了后端的查询、添加、修改、删除接口。这个页面还展示了查询结果,以表格的形式展示了查询到的数据。如果需要修改后端接口的 URL,可以修改 AJAX 请求中的 url 参数。如果需要修改请求的参数,可以修改 data 参数。如果需要修改请求的类型,可以修改 type 参数(默认为 GET)。