用Ajax写批量删除
时间: 2023-08-14 20:07:19 浏览: 45
假设你的删除按钮的HTML代码如下:
```html
<button class="delete-btn" data-id="1">删除1</button>
<button class="delete-btn" data-id="2">删除2</button>
<button class="delete-btn" data-id="3">删除3</button>
<!-- ... -->
```
其中 `data-id` 为每条数据的唯一标识。
使用 Ajax 实现批量删除的 JavaScript 代码如下:
```javascript
// 获取所有删除按钮
const deleteBtns = document.querySelectorAll('.delete-btn');
// 遍历删除按钮,为每个按钮添加点击事件
deleteBtns.forEach(btn => {
btn.addEventListener('click', () => {
// 获取当前要删除的数据的 ID
const id = btn.dataset.id;
// 发送 Ajax 请求进行删除操作
const xhr = new XMLHttpRequest();
xhr.open('DELETE', `/api/data/${id}`);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = () => {
if (xhr.status === 200) {
// 删除成功,移除该条数据的 DOM 元素
btn.parentNode.remove();
} else {
// 删除失败,处理错误信息
console.log(xhr.responseText);
}
}
xhr.send();
});
});
// 批量删除按钮的点击事件
const batchDeleteBtn = document.getElementById('batch-delete-btn');
batchDeleteBtn.addEventListener('click', () => {
// 获取所有被选中的数据的 ID
const selectedIds = [];
const checkboxes = document.querySelectorAll('.data-checkbox');
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
selectedIds.push(checkbox.dataset.id);
}
});
// 如果没有选中任何数据,直接返回
if (selectedIds.length === 0) {
return;
}
// 发送 Ajax 请求进行批量删除操作
const xhr = new XMLHttpRequest();
xhr.open('DELETE', '/api/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = () => {
if (xhr.status === 200) {
// 批量删除成功,移除被选中数据的 DOM 元素
selectedIds.forEach(id => {
const dataRow = document.querySelector(`[data-id="${id}"]`);
dataRow.remove();
});
} else {
// 批量删除失败,处理错误信息
console.log(xhr.responseText);
}
}
xhr.send(JSON.stringify({ ids: selectedIds }));
});
```
其中,点击每个删除按钮会发送一个 DELETE 请求进行单条数据的删除操作,批量删除按钮则会发送一个 DELETE 请求进行多条数据的删除操作。在服务器端实现相应的路由和逻辑即可。