本文讲解如何在使用 SweetAlert 处理 AJAX 提交后，避免页面重载，直接通过 JavaScript 隐藏目标 div 元素，并修正原代码中 localStorage 操作的语法错误与执行逻辑问题。

本文讲解如何在使用 sweetalert 处理 ajax 提交后，**避免页面重载**，直接通过 javascript 隐藏目标 div 元素，并修正原代码中 localstorage 操作的语法错误与执行逻辑问题。

在实际开发中，频繁调用 location.reload() 不仅影响用户体验（造成白屏、状态丢失），还可能掩盖本可通过前端逻辑优雅解决的问题。针对您的需求——在 SweetAlert 确认并完成 AJAX 提交后隐藏

——完全无需刷新页面，只需在请求成功回调中执行 DOM 操作即可。

✅ 正确做法：用 .hide() 或 .remove() 替代 location.reload()

原代码中：

location.reload();
localStorage.removeItem('leftcontent');
localStorage.getItem('rightcontent', data); // ❌ 语法错误：getItem 只接受一个参数

存在两个关键问题：

• location.reload() 强制刷新，导致页面状态重置，无法“记忆”隐藏行为；
• localStorage.getItem() 被误写为带两个参数的形式（应为 getItem(key)），且该行无赋值或使用，实际未生效；removeItem() 虽语法正确，但因位于 reload() 之后，永远不会执行（JS 在 reload 后立即终止当前上下文）。

✅ 推荐修改方案如下（已优化结构、添加错误处理与注释）：

$(document).ready(function() {
    $(document).on('click', '#approve', function() {
        Swal.fire({
            title: 'Are you sure?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) { // 推荐使用 isConfirmed（SweetAlert 11+ 更语义化）
                $('.leftForms').each(function(index, form) {
                    const $form = $(form);
                    const valuesToSend = $form.serialize();

                    $.ajax({
                        url: 'data.php', // 注意：原代码中同时写了 url 和 $(this).attr('action')，以 url 为准
                        type: $form.attr('method') || 'POST',
                        data: valuesToSend,
                        dataType: 'json' // 显式声明响应类型，便于解析
                    })
                    .done(function(response) {
                        Swal.fire({
                            title: 'Data berhasil diupdate!',
                            text: response.message || 'Update completed.',
                            icon: 'success',
                            timer: 1500,
                            showConfirmButton: false
                        }).then(() => {
                            // ✅ 关键：隐藏目标 div（不刷新页面）
                            $('#content1').hide(); // 或 .remove() 彻底移除

                            // ✅ 正确操作 localStorage
                            localStorage.removeItem('leftcontent');
                            // 若需读取 rightcontent：const rightData = localStorage.getItem('rightcontent');

                            // ✅ 可选：重置表单或更新 UI 状态
                            // $form[0].reset();
                        });
                    })
                    .fail(function(xhr, status, error) {
                        Swal.fire('Error', 'Failed to submit: ' + error, 'error');
                    });
                });
            }
        });
    });
});

⚠️ 注意事项与最佳实践

• .hide() vs .remove()：

  • $('#content1').hide() → 元素保留在 DOM 中，仅 CSS display: none，后续可调用 .show() 恢复；
  • $('#content1').remove() → 从 DOM 中彻底删除节点，不可逆（除非重新插入）。

• localStorage 修正说明：

  • getItem(key) 仅接收一个字符串参数，返回存储的值（或 null）；
  • setItem(key, value) 才是设置方法，且 value 必须是字符串（对象需 JSON.stringify）；
  • 所有 localStorage 操作必须放在 reload() 之前，否则无效。

• 增强健壮性建议：

  • 使用 Swal.fire().then(...) 的 Promise 链式写法（如上），避免回调地狱；
  • 为 AJAX 添加 .fail() 处理网络或服务端异常；
  • 对 response.message 做空值判断，防止 undefined 报错；
  • 若需跨页面持久化“隐藏状态”，可在隐藏前存入 localStorage.setItem('content1_hidden', 'true')，并在页面加载时检查并应用：

    $(function() {
        if (localStorage.getItem('content1_hidden') === 'true') {
            $('#content1').hide();
        }
    });

通过以上改造，您既能实现目标 div 的即时隐藏，又能提升交互流畅度与代码可维护性——真正的“前端响应式控制”，而非依赖粗暴的页面重载。