Question

我有一个HTML表，每行都有一个删除按钮。删除按钮将对服务器进行AJAX调用以删除记录，并且成功时该行将从表中删除。

HTML：

<table>
    <tr>
        <td>Foo</td>
        <td><button class="delete-row" type="button">Delete Row</button></td>
    </tr>
</table>

JavaScript的：

$(function() {
    $('button.delete-row').click(function () {
        // Would delete the row with an AJAX request
        $(this).closest('tr').remove(); 
    });
});

这是一个演示： https://jsfiddle.net/05vmz344/

除非用户跟随指向另一个页面的链接，然后使用浏览器的后退按钮返回此页面，否则此工作正常。向用户显示该表的陈旧版本，删除的行仍然可见（即DOM更改丢失）。

我已经查看了Stack Overflow上的其他类似问题，建议包括：

更新网址哈希（window.location.hash）
设置Cache-Control标头以强制浏览器重新加载页面
使用隐藏的输入字段跟踪已删除的行，当页面根据隐藏字段加载删除行时
使用AJAX加载表（而不是在服务器端渲染）

然而，这些似乎都不是解决这个问题的好方法。有没有更好的解决方案？

我似乎正处于一个网站变得更像桌面应用程序的地步，也许像Apache Wicket或AngularJS这样的东西真的会自成一体。

Answer 1

选项1,2和5似乎没问题。我没有看到第3个选项如何工作，因为浏览器不需要存储字段值的更改。

因此，除非您使用单页面Web应用程序方式（如AngularJS），并且不通过导航到其他页面来避免导航问题，否则您需要处理浏览缓存问题。用户还可以单击与后退按钮问题不同但类似的书签。

此外，不是一个非常强大的参数，但如果你看一下Stack Overflow，你可以看到它使用Cache-Control和ajax请求。

使用后退按钮时保留DOM更改

1 个答案: