使用Javascript在数据库更改后重新加载页面

Question

我正在展示来自数据库的一个表格，代码如下：

<tr>
  <td>{{ $user->id }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td></td>
</tr>

如果数据库中的内容发生改变，我需要在浏览器中按下F5才能显示更改。现在我想用Javascript刷新页面，每当数据库中有更改时就刷新页面。我不想按时间间隔刷新页面。
我有一个管理员可以更改某人的状态，你也可以自己更改状态。当某人更改自己的状态时，管理员后台应该刷新。
你们有什么想法吗？

- jrenk

---

如果你想要实时更新，那么你需要研究一下Websockets。 - Ben Fortune

每隔30秒向服务器发送请求，其中一个脚本将检查是否有更新，返回答案给客户端并重新加载或不重新加载页面。您还可以查看长轮询 https://github.com/panique/php-long-polling。 - heroin

可能是重复的问题：如何在特定时间自动重新加载网页？ - Anil Bhattarai100

我对Javascript还比较新，所以Websockets对于我这个初学者来说并不是最优的选择，但还是谢谢你的建议。我想我会尝试使用长轮询或短轮询方法。感谢你的回答！ - jrenk

Answer 1

定时使用ajax从数据库获取数据。

循环遍历从数据库中获取的字段并与页面上的当前字段进行比较。

如果发现有任何更改，则使用已经获取的数据在前端更新它。

- Alex09

Answer 2

最简单的方法（已经被提及）是每隔x秒刷新页面。

然而，这意味着如果用户正在浏览/编辑页面上的任何内容，他只有x秒来完成此操作，否则所有进度都将丢失。

您可以使用AJAX检查数据库中的更改：

• 创建一个名为DB-Check.php的脚本，输出最新的数据库条目
• 在您的主文件中，包含一个AJAX脚本，每30秒拉取一次 DB-Check.php
• 将DB-check.php的输出放入新的JS变量中
• 如果新变量与旧变量不同，则刷新整个页面（或使用AJAX加载其余数据库内容）

- Benjamin Rasmussen

---

我猜你在使用 PHP :) 当然，它也应该适用于其他编程语言。 - Benjamin Rasmussen

Answer 3

 // AJAX Request
            $.ajax({
                url: 'remove.php',
                type: 'POST',
                data: { id:id },
                success: function(response){
    
                    if(response == 1){
                        // Remove row from HTML Table
                        $(el).closest('div').css('background','tomato');
                        $(el).closest('div').fadeOut(800,function(){
                            $(this).remove();
                        });
                     location.reload();   
                    }else{
                        alert('Invalid ID.');

- Vasyl Lukanych

---

目前你的回答不够清晰，请编辑并添加更多细节以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 4

最简单的解决方案是在几秒钟内自动刷新页面。因此，请将以下内容添加到头部：

<meta http-equiv="refresh" content="30" />

每30秒刷新一次。 其他方法是通过JavaScript：

setTimeout('window.location.reload();', 30000);

或者

setTimeout('history.go(0);', 30000);

或者

setTimeout("location.reload(true);", timeoutPeriod);

- Nyi Ma Lay Win Lae Aye

---

我不想像我在问题中说的那样，在一段时间后刷新它。 - jrenk

Answer 5

location.reload();

这是重新加载当前页面的JavaScript函数。当你想要时，你可以在js函数内部使用这个函数。

这个问题有点大，所以如果你想根据你的场景得到正确的答案，请描述你的详细场景。

你可能正在寻找像这样的内容 如何在特定时间自动重新加载网页？

- Anil Bhattarai100

Answer 6

我会使用非常基本的API来完成这个任务。jQuery（或JS）向API URL发出请求，该URL返回布尔值，并使用此布尔值，true将触发刷新页面（甚至更好的是-使用jQuery在不刷新的情况下更改内容），这将是我的方法。

- pankijs