如何在jQuery Ajax的.done()后页面刷新时保留后端返回的data值？

你遇到的核心问题是页面刷新后，前端内存里的临时数据会被清空，所以得把消息存到能跨页面刷新保留的存储介质里，下面是几个实用的方案：

方案1：使用sessionStorage临时存储 #

sessionStorage是浏览器提供的会话级存储，关闭标签页就会自动清空，刚好适合这种一次性的操作提示消息。

修改你的Ajax代码：

$.ajax({ url: "/users", type: "POST", contentType: "application/json", data: JSON.stringify(payload) })
 .done(function (data, status, jqXHR) {
    // 把后端返回的消息存入sessionStorage
    sessionStorage.setItem('successMessage', data);
    // 执行页面刷新
    window.location.reload();
 })
 .fail(function(data) {
    console.log( "error" );
 })
 .always(function() {
    console.log("processed")
 });

然后在页面初始化时（比如放在$(document).ready()里），读取并展示消息：

$(document).ready(function() {
  const successMsg = sessionStorage.getItem('successMessage');
  if (successMsg) {
    $("#output").html(successMsg);
    // 展示后立即删除存储的消息，避免下次刷新重复显示
    sessionStorage.removeItem('successMessage');
  }
});

方案2：通过URL参数传递消息 #

如果消息内容比较短且不含特殊字符，可以把它作为URL参数传递，刷新后从URL中读取展示。

修改Ajax的done回调：

.done(function (data, status, jqXHR) {
    // 对消息进行URI编码，避免特殊字符导致的参数异常
    const encodedMsg = encodeURIComponent(data);
    // 跳转到当前页面并带上消息参数
    window.location.href = window.location.pathname + '?success=' + encodedMsg;
})

页面加载时读取URL参数并展示：

$(document).ready(function() {
  const urlParams = new URLSearchParams(window.location.search);
  const successMsg = urlParams.get('success');
  if (successMsg) {
    $("#output").html(decodeURIComponent(successMsg));
    // 可选：如果不想让参数留在URL栏，可以用replaceState清除
    window.history.replaceState({}, document.title, window.location.pathname);
  }
});

方案3：后端存储到Session，刷新后从后端获取 #

如果你的应用已经在用用户会话（比如Express的express-session），可以把消息存在用户的会话中，刷新后前端发请求从后端取出。

后端修改（以Express为例）： #

app.post('/users', (req, res) => {
  // 处理用户保存逻辑...
  const successMsg = `User saved in Database with ID: ${newUserId}`;
  // 将消息存入用户session
  req.session.successMessage = successMsg;
  res.send(successMsg);
});

// 新增接口用于获取会话中的提示消息
app.get('/get-success-msg', (req, res) => {
  const msg = req.session.successMessage;
  // 取出消息后立即删除，避免重复展示
  delete req.session.successMessage;
  res.send(msg || '');
});

前端修改： #

Ajax的done回调直接刷新页面即可：

.done(function (data, status, jqXHR) {
    window.location.reload();
})

页面初始化时请求后端获取消息：

$(document).ready(function() {
  $.get('/get-success-msg')
    .done(function(msg) {
      if (msg) {
        $("#output").html(msg);
      }
    });
});

这几个方案里，sessionStorage是最轻便的，不需要改动后端代码；URL参数适合短消息场景；后端Session方案更适合消息内容敏感、需要严格控制展示时机的场景，你可以根据自己的需求选择~

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