javascript - 返回按钮后刷新页面

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 ，我明确表示我熟悉建议的答案，并且我认为这种方法在用户体验方面是 Not Acceptable 。这就是为什么我问这个问题是为了寻求另一种解决方案。

Answer 1

您可以通过 Ajax 驱动 UI，而不是使用页面重新加载。学生表可以加载到一个部分中，该部分可以在编辑单个学生后自动重新加载。该结构很大程度上取决于您自己的代码库，但通常是这样的:

定义容器元素:

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

然后从 JavaScript 中的某个位置调用 ajax:

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

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