Question

所以，我有很多像这样的网页，有GET参数：benchmark.php?game_id=87 显示有关特定游戏的信息（信息在数据库中），还包含一个“编辑”按钮。

“编辑”按钮使用JS window.open("edit_game.php?game_id=87",...)打开一个新窗口 “编辑”窗口包含一些用于添加/修改数据的文本框和一个“保存”按钮。

这里所需的行为是，当我按下edit_game.php页面上的“保存”按钮时，不仅信息保存在数据库中（这有效），而且benchmark.php?game_id=87页面也可能刷新这样显示的信息是实际的。我不知道如何在第x页上提交，第y页知道并刷新＆＃39;。

我认为我应该使用AJAX，但我不知道从哪里开始。我尝试过的是这样的事情

setInterval( function(){
        $('#refresh_station').load('game_information.php');
    }, 2000);

每2秒刷新一次benchmark.php?game_id=87中的信息，但我发现这非常低效，因为即使没有修改也会刷新信息。

这是解决这种情况的唯一方法吗？

编辑：我应该提一下，在按下保存后，edit_game.php?game_id=87不应关闭或任何内容。因此，我无法使用提交表单重定向回benchmark.php。

Answer 1

是的，你应该使用Ajax，它还在数据库表last_update中添加一个字段，现在当页面edit_game.php？game_id = 87加载它有last_update时间，ajax在某个间隔时间检查这个最后更新如果ajax看到有任何更新页面应该刷新。

Answer 2

在我看来，运行一个每隔几秒检查记录是否已更改的循环并不是最佳解决方案。当您在弹出窗口中提交表单时，可以更轻松地触发页面刷新。

使用window.opener，您可以在打开当前所在弹出窗口的窗口上执行操作。在您的情况下：

<form onsubmit="window.opener.location.reload();">
Your form here.
<input type="submit" value="Save changes">
</form>

或者在jQuery中：

$('form').submit(function() {
    window.opener.location.reload();
});

Answer 3

postMessage

可以与子窗口通信。 Link

window.addEventListener("message", function (event) {});

会让你从子窗口听到它。

这应该可以帮助您满足您的需求。整个事物在事件和消息的帮助下进行通信。

此外，您需要在本地运行（因为我打开了弹出窗口到同一个窗口）

Answer 4

IMO，最好的方法是使用弹出窗体。如果您的网页已经在使用Bootstrap，您可以使用编辑表单轻松添加模式弹出窗口作为其内容。单击编辑按钮时，您可以打开此弹出窗口，而不是打开新窗口。

然后单击提交按钮并在Ajax成功函数内部使用ajax提交此表单，添加javascript / jQuery以关闭模式并刷新页面内容。