jQuery与AJAX技术问题：页面刷新后如何获取请求结果

针对你遇到的页面刷新后丢失AJAX操作结果的问题，我给你整理了几个实用的解决思路，结合你的现有代码来具体说明：

方案1：用本地存储记录请求结果 #

这个思路是在AJAX请求成功后，把结果存在浏览器的本地存储里，页面刷新时再读取并渲染到页面上。好处是不需要额外的服务器接口，适合快速实现。

修改你的script.js代码：

function submitAjaxFunction() {
  var data = { /* 你的数据内容 */ };
  $.ajax({
    type: "POST",
    url: "/* 你的目标地址 */",
    data: data,
    success: function(response){ 
      // 1. 先把结果渲染到页面
      $('#results').append('<div>' + JSON.stringify(response) + '</div>');
      // 2. 把结果存到localStorage（sessionStorage是会话级，关闭浏览器就消失）
      localStorage.setItem('lastAjaxResult', JSON.stringify(response));
    },
    error: function(e){ 
      // 错误处理逻辑，也可以把错误信息存起来
      localStorage.setItem('lastAjaxError', JSON.stringify(e));
    }
  });
}

// 页面加载时读取本地存储的结果并展示
$(document).ready(function() {
  var lastResult = localStorage.getItem('lastAjaxResult');
  if (lastResult) {
    $('#results').append('<div>上次操作结果：' + lastResult + '</div>');
    // 如果不需要长期保存，可以读取后删除
    // localStorage.removeItem('lastAjaxResult');
  }
});

方案2：服务器端查询最新插入记录 #

因为你的数据已经插入到数据库了，页面刷新后直接发起一个GET请求，从服务器拉取最新的插入数据，然后渲染到页面。这个方案最可靠，因为数据存在服务器，不会因为清理浏览器存储丢失。

修改你的script.js，新增一个加载最新数据的函数：

// 加载最新插入的数据
function loadLatestInsertedData() {
  $.ajax({
    type: "GET",
    url: "/* 新增的获取最新记录的接口地址 */",
    success: function(response){ 
      // 清空现有结果（可选），然后渲染最新数据
      $('#results').empty();
      $('#results').append('<div>最新插入记录：' + JSON.stringify(response) + '</div>');
    },
    error: function(e){ 
      console.error('加载最新数据失败：', e);
    }
  });
}

// 页面加载时自动调用
$(document).ready(function() {
  loadLatestInsertedData();
});

// 原有的提交函数不变，成功后可以调用loadLatestInsertedData刷新列表
function submitAjaxFunction() {
  var data = { /* 你的数据内容 */ };
  $.ajax({
    type: "POST",
    url: "/* 你的目标地址 */",
    data: data,
    success: function(response){ 
      console.log('插入成功');
      // 插入成功后重新加载最新数据
      loadLatestInsertedData();
    },
    error: function(e){ /* 错误处理逻辑 */ }
  });
}

方案3：通过URL参数传递临时结果（适合单次场景） #

如果只是想在刷新后临时展示这次的操作结果，可以在AJAX成功后，通过重定向把结果作为URL参数传递，页面加载时解析参数展示。适合数据比较简单的情况。

修改你的AJAX success回调：

success: function(response){ 
  // 把结果转成URL安全的字符串
  var resultStr = encodeURIComponent(JSON.stringify(response));
  // 重定向到当前页面并带上参数
  window.location.href = window.location.pathname + '?result=' + resultStr;
}

然后页面加载时解析参数：

$(document).ready(function() {
  // 解析URL参数
  const urlParams = new URLSearchParams(window.location.search);
  const result = urlParams.get('result');
  if (result) {
    const parsedResult = JSON.parse(decodeURIComponent(result));
    $('#results').append('<div>操作结果：' + JSON.stringify(parsedResult) + '</div>');
    // 可以移除参数，避免刷新后重复展示
    history.replaceState({}, document.title, window.location.pathname);
  }
});

你可以根据自己的业务场景选择最合适的方案：如果需要长期保留结果用方案1，数据重要需要可靠展示用方案2，临时单次展示用方案3。

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