下面是一个使用AJAX发送删除请求,并根据ID删除li元素的示例代码:
HTML代码:
- Item 1
- Item 2
- Item 3
JavaScript代码:
// 获取ul元素
var list = document.getElementById('list');
// 监听ul元素的点击事件
list.addEventListener('click', function(e) {
// 检查点击的元素是否为li
if (e.target.tagName === 'LI') {
// 获取被点击的li元素的ID
var id = e.target.id;
// 发送AJAX请求删除该li元素
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 删除成功后移除li元素
e.target.remove();
}
};
xhr.open('DELETE', '/delete/' + id, true);
xhr.send();
}
});
上述代码中,我们首先获取了ul元素,然后监听其点击事件。当点击的元素为li时,获取该li元素的ID,并使用AJAX发送一个DELETE请求到服务器上的/delete/ID
接口。如果删除操作成功(即返回状态码为200),则在前端将该li元素从DOM中移除。
上一篇:AJAX删除功能未正常工作