本文详细讲解在Spring项目中，如何通过前端JavaScript的Fetch API和DOM操作，实现对特定表单或字段集的局部内容刷新，尤其是在执行删除操作后，避免整页刷新，从而提升用户体验和应用性能。我们将通过为动态生成的元素添加唯一ID，并利用JavaScript精确移除或隐藏DOM元素，来达到无刷新更新视图的目的。
1. 引言：局部刷新的必要性
在现代web应用开发中，用户体验是至关重要的。当用户执行如添加、删除或修改数据等操作时，期望页面能够即时响应，并且只更新相关联的局部内容，而不是整个页面重新加载。全页刷新不仅会中断用户的操作流程，导致表单数据丢失或滚动位置重置，还会增加服务器负载和网络带宽消耗。
本教程将以一个Spring项目中的商品列表管理为例，详细阐述如何利用JavaScript的Fetch API与DOM操作，实现删除商品后仅刷新显示列表的特定区域，而不是整个页面。
2. 问题背景：全页刷新带来的困扰
在原始的项目实现中，当用户点击“删除”按钮并成功从数据库中删除商品后，前端视图并不会立即更新。用户需要手动刷新整个页面才能看到删除后的结果。然而，这种全页刷新会导致以下问题：
状态丢失： 如果页面上存在其他未提交的表单数据，刷新会导致这些数据丢失。用户体验差： 页面闪烁、加载时间增加，降低用户满意度。效率低下： 重新加载所有资源（HTML、CSS、JS等），浪费带宽和服务器资源。
为了解决这些问题，我们需要采用局部刷新的策略，即通过异步请求（AJAX）与DOM操作来更新页面内容。
3. 核心机制：Fetch API与DOM操作
实现局部刷新的核心在于：
立即学习“前端免费学习笔记（深入）”；
异步通信： 使用Fetch API向后端发送数据请求（GET, POST, DELETE等），而不是通过传统表单提交导致页面跳转。DOM操作： 在接收到后端响应后，使用JavaScript动态地修改HTML文档对象模型（DOM），例如添加、删除或修改页面上的元素。
在我们的商品列表案例中，当删除操作成功后，后端会返回一个确认信息（通常包含被删除商品的ID），前端根据这个ID找到对应的HTML元素并将其移除或隐藏。
4. 实现步骤：改造删除功能以支持局部刷新
为了实现删除后的局部刷新，我们需要对现有代码进行以下改造：
4.1 为动态生成的列表项添加唯一标识
在createNewProduct函数中，每个商品列表项（label元素）都需要一个唯一的ID，以便在删除时能够精确地找到并操作它。建议使用pid-前缀加上商品ID作为元素的ID。
原始代码片段：
function createNewProduct(product) { const label = document.createElement('label'); // ... 其他创建子元素的代码 label.classList.add('label'); // ... 填充子元素内容 document.getElementById('allProducts').appendChild(label); // ... 样式设置}
改造后的createNewProduct函数：
function createNewProduct(product) { const label = document.createElement('label'); label.setAttribute('id', `pid-${product.id}`); // 添加唯一ID const l1 = document.createElement('label'); const l2 = document.createElement('label'); const l3 = document.createElement('label'); const l4 = document.createElement('label'); label.classList.add('label'); l1.appendChild(document.createTextNode(` ID:${product.id}. `)); l2.appendChild(document.createTextNode(` ${product.name} `)); l3.appendChild(document.createTextNode(` ${product.amount} `)); l4.appendChild(document.createTextNode(` ${product.type} `)); label.appendChild(l1).appendChild(l2).appendChild(l3).appendChild(l4); document.getElementById('allProducts').appendChild(label); label.style.display= 'table'; label.style.paddingLeft='40%'; label.style.wordSpacing='30%';}
4.2 创建删除后更新视图的函数
我们需要一个专门的函数来处理后端返回的删除成功响应，并根据响应中的ID来更新前端视图。这个函数将接收后端返回的包含被删除商品ID的对象。
deleteProduct函数：
function deleteProduct(deleteApiResponse) { // 确保后端在删除成功后返回了被删除商品的ID // 例如：DELETE /api/list/123 成功后，后端响应 { "id": 123, "message": "Product deleted successfully" } const { id } = deleteApiResponse; if (id) { const elementIdToDel = `pid-${id}`; const elementToRemove = document.getElementById(elementIdToDel); if (elementToRemove) { // 方式一：隐藏元素 (保留在DOM中，只是不可见) elementToRemove.style.display = 'none'; // 方式二：从DOM中完全移除元素 (更彻底) // elementToRemove.parentNode.removeChild(elementToRemove); } else { console.warn(`Element with ID ${elementIdToDel} not found for deletion.`); } } else { console.error("No ID found in delete API response."); }}
注意事项：
后端API在成功删除后，应该返回被删除商品的ID，以便前端能够识别并操作对应的DOM元素。elementToRemove.style.display = ‘none’; 只是隐藏元素，元素仍然存在于DOM中。elementToRemove.parentNode.removeChild(elementToRemove); 会从DOM中彻底移除元素，这是更常见的做法。您可以根据实际需求选择其中一种方式。
4.3 整合删除逻辑与视图更新
最后，我们需要修改removeTodo函数，使其在DELETE请求成功后，调用deleteProduct函数来更新前端视图。
原始removeTodo函数：
function removeTodo() { const d = document.getElementById('idToDel').value; fetch(`${API_URL_ALL}/${d}`, { method: 'DELETE' }) .then(processOkResponse) .catch(console.info)}
改造后的removeTodo函数：
function removeTodo() { const d = document.getElementById('idToDel').value; if (!d) { alert("Please provide an ID to delete."); return; } fetch(`${API_URL_ALL}/${d}`, { method: 'DELETE' }) .then(processOkResponse) .then(deleteProduct) // 在删除成功后调用deleteProduct更新视图 .then(() => { document.getElementById('idToDel').value = ''; // 清空输入框 console.log(`Product with ID ${d} deleted successfully.`); }) .catch(error => { console.error('Error deleting product:', error); alert('Failed to delete product. Please check console for details.'); });}
5. 完整代码示例（关键部分）
以下是整合了上述修改后的关键JavaScript代码片段：
const API_URL = 'http://localhost:8080'; const API_URL_ADD = `${API_URL}/api`; const API_URL_ALL = `${API_URL_ADD}/list`; const pName = document.getElementById('name'); const pUom = document.getElementById('uom'); const pAmount = document.getElementById('amount'); // 页面加载时获取所有商品并显示 fetch(API_URL_ALL) .then(processOkResponse) .then(list => list.forEach(createNewProduct)) .catch(console.error); // 增加错误处理 // 添加商品功能（已支持局部刷新） document.getElementById('addProduct').addEventListener('click', (event) => { event.preventDefault(); fetch(API_URL_ALL, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ name: pName.value, type : pUom.value, amount: pAmount.value }) }) .then(processOkResponse) .then(createNewProduct) // 添加成功后直接创建新元素 .then(() => { pName.value = ''; pAmount.value = ''; pUom.value = ''; }) .catch(console.warn); }); // 创建新的商品列表项并添加到DOM中 function createNewProduct(product) { const label = document.createElement('label'); label.setAttribute('id', `pid-${product.id}`); // 为每个商品添加唯一ID const l1 = document.createElement('label'); const l2 = document.createElement('label'); const l3 = document.createElement('label'); const l4 = document.createElement('label'); label.classList.add('label'); l1.appendChild(document.createTextNode(` ID:${product.id}. `)); l2.appendChild(document.createTextNode(` ${product.name} `)); l3.appendChild(document.createTextNode(` ${product.amount} `)); l4.appendChild(document.createTextNode(` ${product.type} `)); label.appendChild(l1).appendChild(l2).appendChild(l3).appendChild(l4); document.getElementById('allProducts').appendChild(label); label.style.display= 'table'; label.style.paddingLeft='40%'; label.style.wordSpacing='30%'; } // 删除商品按钮事件监听 document.getElementById('delProduct').addEventListener('click', (event) => { event.preventDefault(); removeTodo(); }); // 执行删除操作并更新视图 function removeTodo() { const d = document.getElementById('idToDel').value; if (!d) { alert("Please provide an ID to delete."); return; } fetch(`${API_URL_ALL}/${d}`, { method: 'DELETE' }) .then(processOkResponse) .then(deleteProduct) // 调用deleteProduct函数更新视图 .then(() => { document.getElementById('idToDel').value = ''; // 清空输入框 console.log(`Product with ID ${d} deleted successfully.`); }) .catch(error => { console.error('Error deleting product:', error); alert('Failed to delete product. Please check console for details.'); }); } // 根据后端响应的ID，从DOM中移除或隐藏对应的商品元素 function deleteProduct(deleteApiResponse) { const { id } = deleteApiResponse; // 假设后端返回 { id: deletedId } if (id) { const elementIdToDel = `pid-${id}`; const elementToRemove = document.getElementById(elementIdToDel); if (elementToRemove) { elementToRemove.style.display = 'none'; // 隐藏元素 // 或者 elementToRemove.parentNode.removeChild(elementToRemove); // 彻底移除元素 } else { console.warn(`Element with ID ${elementIdToDel} not found for deletion.`); } } else { console.error("No ID found in delete API response. Cannot update view."); } } // 处理Fetch响应，检查HTTP状态码 function processOkResponse(response = {}) { if (response.ok) { return response.json(); } throw new Error(`Status not 200 (${response.status})`); } // ... 其他函数（如AddFunction, print-btn等）保持不变
6. 注意事项与最佳实践
后端API设计： 确保您的Spring后端在执行DELETE操作成功后，能够返回被删除资源的ID。这是前端进行精确DOM操作的关键。例如，一个成功的DELETE响应可以是{“id”: 123, “message”: “Product deleted successfully”}。错误处理： 在fetch请求中，务必添加.catch()来处理网络错误或后端返回的非2xx状态码，并向用户提供有意义的反馈。用户反馈： 除了更新列表，还可以考虑在删除成功或失败时，通过短暂的提示信息（如Toast通知）来增强用户体验。DOM操作选择： display: none只是隐藏元素，它仍然占用内存并存在于DOM树中。如果删除的元素数量很大，或者您希望彻底释放资源，parentNode.removeChild(elementToRemove)是更好的选择。替代方案： 对于更复杂的列表管理，可以考虑使用前端框架（如React, Vue, Angular）或库（如jQuery），它们提供了更便捷的数据绑定和DOM更新机制。安全性： 在实际生产环境中，删除操作通常需要用户认证和授权。确保您的后端API有适当的安全措施。
7. 总结
通过为动态生成的DOM元素分配唯一ID，并结合Fetch API进行异步数据交互，以及JavaScript的DOM操作，我们可以高效地实现页面的局部刷新。这种方法避免了全页刷新的性能开销和用户体验问题，使得Web应用更加流畅和响应迅速。掌握这种前端更新策略，是构建现代交互式Web应用的重要技能。
以上就是利用Fetch API与DOM操作实现Spring项目前端局部内容刷新的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1582271.html
微信扫一扫 
支付宝扫一扫 
