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，而不是使用页面重新加载。可以将学生表加载到可以在编辑个别学生之后自动重新加载的部分。结构很大程度上取决于您自己的代码库，但通常是这样的：

定义容器元素：

vim

然后从javascript中的某处调用ajax：

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

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

后退按钮后刷新页面

1 个答案: