返回按钮后刷新页面

Question

想象一下呈现学生表的网站页面

Name  Surname Age
John  Smith   16
Sally Parker  18
....

通过单击表格行，将打开包含学生详细信息的页面。例如，如果我点击第二行，我将被重定向到 Sally Parker 的页面：

Sally Parker
Name: Sally
Surname: Parker
Age 18
Sex: F
Number of courses: 10

现在，如果我编辑年龄，并插入 19 而不是 18，那么在按下后退按钮后，我会在表中看到旧值（即 18），这是误导，因为此信息已过时. 起初，我找到了以下解决方案：在呈现表格的页面的html中，我放置了如下所述的代码：

<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
    onload=function(){
    var e=document.getElementById("refreshed");
    if(e.value=="no")e.value="yes";
    else{e.value="no";location.reload();}
    }
</script>

这种方法有效地解决了问题，但最终证明用户体验极差。我必须等待两三秒钟，直到页面刷新。有没有人知道任何其他方法可以使 DOM 跟踪上例中的更改以提供更好的用户体验？缓存和这个有关系吗？

更新： 这种方法不仅在速度方面很差，而且当用户按下后退按钮导航到上一页并且他认为他已经在那里，开始滚动表格并且页面突然刷新时，这有点令人讨厌。这很烦人。

更新 2： 至于this post，我明确表示我熟悉建议的答案，并且我认为这种方法在用户体验方面是不可接受的。这就是为什么我提出这个问题是为了寻求另一种解决方案。

Answer 1

您可以通过 Ajax 驱动 UI，而不是使用页面重新加载。学生表可以加载到一个部分，该部分可以在编辑单个学生后自动重新加载。该结构将高度依赖于您自己的代码库，但通常是这样的：

定义一个容器元素：

<div id="container"> ... </div>

然后从你的 javascript 中的某个地方调用 ajax：

$.ajax({ type: 'get', url: urlOfPage, success: function (data) {
    $('#container').html(data);
}});

同样，所有这些都高度依赖于您自己的代码库，但这是“单页应用程序”的基本结构。有一些框架可以解决这个问题，例如 Angular、React、Meteor 等。否则，当用户点击后退按钮时，浏览器将显示缓存的最后一页。