AJAX请求成功刷新页面后显示成功提示的实现方案（不修改数据库）

不用修改数据库也能轻松搞定！核心思路是利用前端的**会话存储（sessionStorage）**临时保存成功状态，页面刷新后读取这个状态再显示提示。具体操作如下：

1. 在AJAX成功回调中存入状态标记 #

当AJAX返回true时，先把成功状态存在sessionStorage里，再执行页面刷新：

success: function (data) {
  if (data.response === true) {
    // 临时存储成功状态到会话存储
    sessionStorage.setItem('updateSuccess', 'true');
    location.reload();
  }
}

2. 页面加载时检查并显示提示 #

页面刷新完成后，读取sessionStorage里的标记，如果存在就渲染成功提示，然后立刻清除标记（避免下次刷新重复显示）：

$(document).ready(function() {
  // 检查是否有更新成功的标记
  const hasSuccess = sessionStorage.getItem('updateSuccess');
  if (hasSuccess === 'true') {
    $('.msg-div').addClass('alert alert-success');
    $('#msg').text("Successfully Updated Records");
    // 清除标记，确保提示只显示一次
    sessionStorage.removeItem('updateSuccess');
  }
});

为什么选sessionStorage？ #

• 它是会话级存储：仅在当前浏览器标签页打开时有效，关闭标签或浏览器就会自动清除，不会留下残留数据。
• 刷新页面后数据不会丢失：完美匹配你刷新后读取状态的需求。
• 全程无需修改数据库或表结构，纯前端就能解决问题。

⚠️ 小提醒：要确保页面上确实存在.msg-div和#msg这两个DOM元素，不然提示无法正常渲染哦！

内容的提问来源于stack exchange，提问作者Usman Manzoor