利用Fetch API与DOM操作实现Spring项目前端局部内容刷新-html教程-PHP中文网

利用Fetch API与DOM操作实现Spring项目前端局部内容刷新

本文详细讲解在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函数：

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

查看详情

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代码片段：

<script>
    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等）保持不变
</script>

登录后复制

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有适当的安全措施。