通过AJAX从数据库和DOM中删除对象
基础概念
AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页应用能够快速地更新内容。
相关优势
- 提高用户体验：用户无需刷新页面即可看到更新的内容。
- 减少服务器负载：只传输必要的数据，而不是整个页面。
- 提高响应速度：异步通信使得页面加载更快。
类型
- GET请求：用于从服务器获取数据。
- POST请求：用于向服务器发送数据。
应用场景
- 动态网页内容更新
- 表单提交
- 实时数据展示
删除对象示例
假设我们有一个简单的网页，显示一个用户列表，并且可以通过点击按钮删除某个用户。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User List</title>
</head>
<body>
<ul id="userList">
<!-- 用户列表将通过AJAX动态生成 -->
</ul>
<script src="script.js"></script>
</body>
</html>JavaScript部分（script.js）
document.addEventListener('DOMContentLoaded', function() {
// 获取用户列表
fetchUsers();
// 绑定删除按钮事件
document.getElementById('userList').addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
const userId = event.target.getAttribute('data-id');
deleteUser(userId);
}
});
});
function fetchUsers() {
fetch('/api/users')
.then(response => response.json())
.then(users => {
const userList = document.getElementById('userList');
users.forEach(user => {
const li = document.createElement('li');
li.textContent = user.name;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.setAttribute('data-id', user.id);
li.appendChild(deleteButton);
userList.appendChild(li);
});
});
}
function deleteUser(userId) {
fetch(`/api/users/${userId}`, {
method: 'DELETE'
})
.then(() => {
// 从DOM中删除用户
const userItem = document.querySelector(`[data-id="${userId}"]`).parentElement;
userItem.remove();
})
.catch(error => console.error('Error:', error));
}可能遇到的问题及解决方法
问题1：AJAX请求失败
原因：可能是网络问题、服务器错误或请求路径不正确。
解决方法：
fetch('/api/users', {
method: 'GET'
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.catch(error => console.error('Error:', error));问题2：DOM操作失败
原因：可能是选择器错误或DOM元素不存在。
解决方法：
const userItem = document.querySelector(`[data-id="${userId}"]`).parentElement;
if (userItem) {
userItem.remove();
} else {
console.error('User item not found');
}参考链接
通过以上示例和解释，你应该能够理解如何通过AJAX从数据库和DOM中删除对象，并解决一些常见问题。
相关·内容
1回答
因此，我有一个简单的AJAX post请求，它按照我想要的方式从Model中删除对象，但是我正在努力从DOM中正确地删除它。function removeFriend(id){
type: 'POST', {% endfor %}
浏览 13提问于2020-11-09得票数 0
回答已采纳
我有一些jQuery，它将orientation事件绑定到页面上，当方向改变时，它会从页面中删除一堆对象：但是，如果我们随后通过AJAX加载更多这些对象，这些项在方向更改时不会被删除。这很令人困惑，因为我的假设
浏览 2提问于2012-03-21得票数 0
2回答
我正在开发一个有很多Javascript的AJAX应用程序。所有页面都通过AJAX加载。我的问题是如何从内存中删除这个网格对象？因为当我离开页面时它仍然存在。
非常感谢！
浏览 0提问于2011-02-25得票数 5
回答已采纳
我使用的是Rails 3后端的jQuery，我有以下场景：
用户单击“后退”按钮返回到带有注释的页面。旧的注释仍然存在，尽管它已从服务器和DOM中<em
浏览 5提问于2011-04-12得票数 3
回答已采纳
我有以下负责删除应答对象的ajax.actionlink： @Ajax.ActionLink("Delete", "Delete", "Answer",我浏览到显示应答对象的预期网页，然后手动从数据库中删除答案对象，然后单击删除对象后面的delete ajax
浏览 2提问于2012-03-10得票数 1
回答已采纳
1回答
当我们使用ajax对数据库表(insert/update/delete)执行破坏性操作时，DOM必须反映这一变化。我看到两种常用的方法。当破坏性数据库操作成功时，操作html表中的行以反映更改。
假设用户A和B正在访问一个5行的表。然后A删除第一行，B删除第二行。使用DOM操作方法
浏览 2提问于2020-07-13得票数 0
回答已采纳
1回答
我目前正在使用jQuery移动设备，并对DOM的一般工作方式提出了一个快速的问题。目前，我将事件绑定到通过AJAX加载的页面上的元素(页面被注入DOM)。根据的说法，当页面转换时，jQuery手机会从DOM中删除页面。
我是否需要担心将jQuery事件与不再存在于DOM中的元素绑定？当我通过ajax更改页面时，我确信GC会清理我的绑定吗？;绑定的元素从DO
浏览 0提问于2012-02-28得票数 3
2回答
我有一个带有数据库MySQL的php应用程序。编辑所以，我的决定，如果它帮助任何人(感谢所有的回应！)我使用一个处理程序对象来跟踪更改，一旦用户单击update按钮，这些更改就应用到<e
浏览 3提问于2013-09-12得票数 1
回答已采纳
我在一个Jquery站点中使用了一堆插件，我正在寻找一种最好的方法来“清理”当我离开一个页面，它停留在DOM中。controlsContainer: $(".flex-container") } 问题：
假设这是我的Jquery锚页面(总是停留在DOM中)，当用户离开页面并在重新加载时重新输入，还是让滑块在后台运行？
浏览 0提问于2012-04-24得票数 0
回答已采纳
但是当我尝试实现Ajax时，它开始有一些古怪的行为。我可以通过Ajax删除DOM文档，该行将从表中消失。但在那之后，如果我单击表的标题，就会突然返回并显示该行，即使它已经在数据库中被删除了！我怀疑jQuery remove()没有从页面的DOM中删除实际的元素，不知何故，它保留在那里，但没有显示出来。因此，当我单击标题时，数据表认为行仍然在那里。我被卡住了。有人能帮我吗？
浏览 0提问于2011-06-15得票数 0
回答已采纳
编辑页面在一个表单中列出属于该ExpenseClaim的所有相关费用，以便用户可以编辑这些费用。我在每笔费用旁边都有一个X，这样他们就可以在需要时删除它。这个X只是使用JS从DOM中删除了rows字段。当按下保存按钮时，我希望从费用表中删除任何已删除的行，但是由于$this->request->data没有改变(更改只在DOM中)，所以它们不会被删除。
浏览 3提问于2012-08-28得票数 2
回答已采纳
我试图通过递归的$.ajax()调用从服务器检索信息，但希望在它们绑定到的元素被删除时关闭这些调用。element) {
$does_this_element_currently_reside_in_the_dom;
$.aj
浏览 0提问于2013-03-08得票数 0
回答已采纳
相似的问题，但我相信仍然是独一无二的不同：
我有一个内联日历，其中包含从AJAX脚本加载的事件，而且我可以让它正常工作，但是在未来的许多年里，会有数以百计的事件发生。我认为这可以用onMonthAdd来完成，但我遇到的问题是，当我将一个新元素推送到p.events时，直到从元素中删除并读取了这个月，新的事件才会被加载。但是，当我回到12月份，然后导航到11月份时，1月份的日历将从DOM中删除。然后导航回一月，它在DOM中</e
浏览 1提问于2017-11-05得票数 1
我有一个Datatable来显示表(角色)中的数据，并且我使用ajax调用来删除一行： { $.ajax({ }); return
浏览 5提问于2017-02-10得票数 4
回答已采纳
2回答
所以，我在删除django项目数据库中的对象时遇到了问题。我的models.py文件中有一个模型，如下所示。K = models.CharField(max_length=80, null=True)我希望能够删除此模型中的信息在我的项目中，我将这个模型的信息显示在一个类似于这个的表中。我的目标是单击"drop“按钮并删除该行信息。我一直在遵循一些关于为
浏览 0提问于2020-11-19得票数 0
通过在$.ajax中使用延迟对象
var jqxhr = $.ajax({
url: Config.baseUrl+"/ajax/favourites/set-favourite.ajax&qu
浏览 3提问于2013-12-08得票数 5
1回答
我想上传一组图片，这是在DOM中存在的。上传图像后，我希望从DOM中删除该图像的父图片，以便该父图片和图片不再可见。图像及其父对象被动态添加到DOM中。traject: $('select').eq(2).val(), order: order,
$.ajaxdata.order -
浏览 15提问于2019-11-17得票数 1
回答已采纳
我有一份等候名单和一份参与者名单。管理员可以通过单击等待列表上用户名旁边的div将用户添加到参与者列表中。在单击div将某人添加到参与者列表之后，ajax请求将被称为->，该请求将更新数据库中用户的状态，如果ajax请求成功，则无需重新加载页面即可将用户添加到参与者列表。因此，看起来该列表将从数据库中刷新，但用户是通过JQuery添加到列表中的，数据库操作是在后台完成的。
此外，管理员可以<e
浏览 0提问于2012-02-28得票数 1
回答已采纳
2回答
但是，如果我想动态删除某些formset对象(form)，该怎么办？用户按delete按钮-我从DOM中删除form，我使用ajax删除与数据库中的form相关的对象。到现在为止一切正常。if filled_formset.is_valid():
我认为之所以会发生这种情况，是因为django有一定的规律性地显示了form对象(第一种形式是id = orderitem_set-0-
浏览 5提问于2017-12-23得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
