Question

所以我创建了一个显示存储在mysql数据库中的FPS信息的网站。对于每一秒的游戏玩法，我都有一对数字（fps）-image（截图）。

我在用JavaScript制作的折线图中显示数字。所需的行为是当我点击图表中的子弹时，该特定秒的截图显示在页面上的div中。

我必须提到屏幕截图存储在数据库中，并且它们的大小非常小。我然后使用PHP显示：

$query = "SELECT `image` FROM `logs` WHERE `session_id`=".$_GET['session']." AND `second`=".$second;
$sth = $mysqli->query($query);
$result=mysqli_fetch_array($sth);
if (!empty($result))
    echo '      <img id="screen" src="data:image/jpg;base64,'.base64_encode($result['image']).'"/>';

我现在使用的方法是当我点击图表中的子弹（JS中记录的动作）时，我将其作为GET参数发送，之后用PHP读取，如下所示：

window.location.href = url + "?second=" + second;

这种方法显然会刷新我的页面。问题是，我制作的图表还有一个缩放/滚动选项，只要刷新页面就会重置，这会给用户带来非常糟糕的体验。

是否有任何方法可以在不刷新页面的情况下显示屏幕截图，对于这种特殊情况（我必须在每个点击/图片中查询数据库）？也许有更好的方法来解决这个问题？

感谢。

Answer 1

我认为根据您的需要，您有两个Ajax或Websocket解决方案。

<强> AJAX
Ajax允许异步，只有在您需要时，调用服务器并从URL获取数据，该URL可以是Web服务或PHP页面......也许，这是您的情况下更好的解决方案。

为了方便起见，您可以通过下载script并将其插入HTML中来使用JQuery库：

<script src="jquery-3.0.0.min.js"></script>

使用JQuery调用服务器：

$.ajax({
    url: url + "/yourphppage.php",
    data: "parameter=" + yourOptionelParameter,
    async: false,
    success: function(data) {
        refreshYourChart(data);
    },
    error: function() {
        alert("Your error");
    },
    contentType: 'charset=utf-8'
});

或者如果您更喜欢pure javascript。

现在，您只需要在服务器端处理数据的呈现。它可能是你想要的HTML，TXT，JSON，XML ......

<强>的WebSocket
Websocket就像是在服务器和客户端之间打开的永久隧道。每一方都可以实时询问或发送数据。

它似乎是一个图书馆服务器端：
http://socketo.me/
客户方面，很容易：
Nice documentation on mozilla website

希望它有所帮助。祝你好运。

Answer 2

要更改图片来源，我认为最简单的方法是使用ajax调用，这样您就可以向服务器发送任何类型的参数，作为回报，您将获得新的图片源。

$.get('urlToYourServer.com?parameter=1', function(data){
    $('#img').attr('src', data.imgSrc); 
})

如何使用JS显示数据库

2 个答案: