后端用list传递的参数,写一个前端页面展示遍历用户账号密码的操作列表页,可以全选或者不全选,进行删除联动ajax
时间: 2023-12-26 16:05:56 浏览: 72
JS实现登录页密码的显示和隐藏功能
以下是一个简单的HTML页面示例,展示了一个用户账号密码列表,并提供了全选和删除操作的功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User List</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 全选/取消全选
$("#select-all").click(function() {
$(".user-checkbox").prop("checked", $(this).prop("checked"));
});
// 删除选中用户
$("#delete-selected").click(function() {
var selectedUsers = [];
$(".user-checkbox:checked").each(function() {
selectedUsers.push($(this).val());
});
if (selectedUsers.length == 0) {
alert("请选择要删除的用户!");
return;
}
if (confirm("确定要删除选中的用户吗?")) {
$.ajax({
url: "/delete_users",
type: "POST",
data: {users: selectedUsers},
success: function() {
// 删除成功,刷新页面
location.reload();
},
error: function() {
alert("发生错误,请稍后重试!");
}
});
}
});
});
</script>
</head>
<body>
<h1>User List</h1>
<button id="delete-selected">删除选中用户</button>
<br><br>
<table border="1">
<tr>
<th><input type="checkbox" id="select-all"></th>
<th>账号</th>
<th>密码</th>
</tr>
{% for user in user_list %}
<tr>
<td><input type="checkbox" class="user-checkbox" value="{{ user.id }}"></td>
<td>{{ user.username }}</td>
<td>{{ user.password }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
```
在这个示例中,我们通过 jQuery 库来实现全选和删除操作的逻辑。当用户点击“全选”按钮时,我们将所有用户复选框的状态设置为与“全选”按钮相同。当用户点击“删除选中用户”按钮时,我们首先遍历所有选中的用户,并将它们的ID存储在一个数组中。如果没有选中任何用户,则弹出提示框。否则,我们使用 jQuery 的 AJAX 方法向服务器发送一个POST请求,其中包含要删除的用户ID数组。如果删除成功,我们通过 `location.reload()` 方法刷新页面。如果发生错误,则弹出提示框。需要注意的是,这个示例中的删除操作并没有实际删除用户,而是仅仅向服务器发送了一个请求。如果您需要在前端同时删除和更新用户列表,请在相应的后端代码中实现。
阅读全文