在jsp中通过点击批量删除的按钮让Ajax实现批量删除数据库内信息
时间: 2023-11-13 20:02:28 浏览: 224
js实现批量删除功能
在JSP中使用AJAX实现批量删除数据库内的信息,你需要编写以下代码:
HTML代码:
```
<button id="delete-selected">批量删除</button>
<table id="data-table">
<thead>
<tr>
<th><input type="checkbox" id="select-all"></th>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="id" value="1"></td>
<td>1</td>
<td>张三</td>
<td>20</td>
<td><button class="delete-btn" data-id="1">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="id" value="2"></td>
<td>2</td>
<td>李四</td>
<td>25</td>
<td><button class="delete-btn" data-id="2">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="id" value="3"></td>
<td>3</td>
<td>王五</td>
<td>30</td>
<td><button class="delete-btn" data-id="3">删除</button></td>
</tr>
</tbody>
</table>
```
在上面的代码中,我们创建了一个表格,包含了一些数据和一个批量删除按钮。每个数据行都有一个复选框和一个删除按钮。每个删除按钮都有一个 `data-id` 属性,用于存储要删除的数据的ID。
JavaScript代码:
```
$(document).ready(function() {
// 全选/取消全选
$('#select-all').click(function() {
$('input[type="checkbox"][name="id"]').prop('checked', $(this).prop('checked'));
});
// 单个删除
$('.delete-btn').click(function() {
var id = $(this).data('id');
$.ajax({
url: 'your-url-to-delete-data?id=' + id,
type: 'DELETE',
success: function(result) {
// 删除成功后执行的代码
alert('删除成功');
window.location.reload();
},
error: function(error) {
// 删除失败后执行的代码
alert('删除失败');
}
});
});
// 批量删除
$('#delete-selected').click(function() {
var ids = [];
$('input[type="checkbox"][name="id"]:checked').each(function() {
ids.push($(this).val());
});
if (ids.length == 0) {
alert('请至少选择一项');
return;
}
$.ajax({
url: 'your-url-to-delete-data?ids=' + ids.join(','),
type: 'DELETE',
success: function(result) {
// 删除成功后执行的代码
alert('删除成功');
window.location.reload();
},
error: function(error) {
// 删除失败后执行的代码
alert('删除失败');
}
});
});
});
```
在上面的代码中,我们使用jQuery来添加点击事件处理程序。单击删除按钮时,我们从 `data-id` 属性中获取要删除的数据的ID,并使用AJAX请求将其从数据库中删除。在批量删除时,我们首先获取选中行中的所有ID,然后将它们作为一个字符串发送到服务器端进行批量删除。在成功或失败的情况下,我们使用 `alert` 弹出相应的消息,并重新加载页面以显示更新后的数据。
注意:你需要将 `your-url-to-delete-data` 替换为你的JSP页面中处理AJAX请求的URL。同时,你需要在后台进行相应的处理,以便正确地删除数据。
阅读全文