Javascript 平滑刷新显示来自不断更新的MySQL列的数据的html页面_Javascript_Php_Mysql_Ajax

Javascript 平滑刷新显示来自不断更新的MySQL列的数据的html页面

javascript php mysql ajax

Javascript 平滑刷新显示来自不断更新的MySQL列的数据的html页面,javascript,php,mysql,ajax,Javascript,Php,Mysql,Ajax,为了更加清晰，我在这里打开了一个新的线程，因为我们解决了第一个问题，多亏了你们：）我们有一个人工智能，它不断地编写文本并将其推送到MySQL bdd中。我们希望将此文本显示为一个无限的在线发布内容。我们希望看到它在书写，比如当你在屏幕上书写文本时，我们尝试了以下方法： <!DOCTYPE html> <head> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/li

为了更加清晰，我在这里打开了一个新的线程，因为我们解决了第一个问题，多亏了你们：）

我们有一个人工智能，它不断地编写文本并将其推送到MySQL bdd中。我们希望将此文本显示为一个无限的在线发布内容。我们希望看到它在书写，比如当你在屏幕上书写文本时，我们尝试了以下方法：

<!DOCTYPE html>
<head>

<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</head>

<body>
    <div id="myTable"></div>

    <script type="text/javascript">  
        function page_refresh() {
            $.ajax({
                url : 'getData.php',
                type : 'GET',
                success : function(data) { 
                    $('#myTable').html(data);
                },
                error : function(request,error)
                {
                    alert("Request error : "+JSON.stringify(request));
                }
            });
        }

        var period = 100; //NOTE: period is passed in milliseconds
        setInterval(page_refresh, period); 
    </script>

</body>

似乎不能很好地处理如此低的计时，它看起来只是用我们拥有的测试数据刷新了整个页面。另外，由于某些原因，页面在显示数据之前会保持空白几秒钟。有没有更有趣的方法

正如我在评论中所说的，100毫秒对于您的数据库获取Web服务的数据以及Web服务将数据转发到您的前端来说都是行不通的。只有当您使用的数据量较低，并且您的webservice服务器位于数据库服务器的同一台机器上（或靠近该机器）时，此功能才能正常工作

现在，请看“更有趣的方法”

您可以每隔100毫秒获取所需的数据，没有问题，但您不能立即尝试显示它（我已经在评论中解释了原因）。相反，构建一个队列和一个函数来显示它的第一个元素。当函数返回时，是时候从队列中弹出第一个元素并显示下一个元素了。通过这种方式，您可以确保文本始终按照插入顺序正确显示。

正如我在评论中所说，100毫秒对于您的数据库获取Web服务的数据以及Web服务将数据转发到前端来说都是不够的。只有当您使用的数据量较低，并且您的webservice服务器位于数据库服务器的同一台机器上（或靠近该机器）时，此功能才能正常工作

现在，请看“更有趣的方法”

您是否知道如何使用WebSocket？创建此技术是为了取代定期轮询服务器以获取更新。服务器可以将更改推送到客户端，而不是从客户端进行轮询。你可以阅读更多关于它的信息

你有使用WebSocket的知识吗？创建此技术是为了取代定期轮询服务器以获取更新。服务器可以将更改推送到客户端，而不是从客户端进行轮询。您可以阅读更多关于它的信息

短篇故事是制作一个websocket，通过websocket将文本从后端流到前端，并使用Javascript更新html中的文本。你不想用页面刷新来重新渲染，因为根据你的解释，这似乎不是你想要的。你知道一首好的芭蕾舞曲，我可以从中改进和改进它吗？你的间歇期需要更高。除非您处理的数据量很小，并且您的webservice服务器与数据库服务器运行在同一台机器上，否则100ms不会减少。要么它将获取大量内容并同时尝试显示它们，要么它将破坏您的页面布局并返回大量超时/空响应。您的AI无法写入数据库，只能写入websocket，完成后写入数据库。请使用ratchet。简短的故事是制作一个websocket，通过websocket将文本从后端流到前端，并使用Javascript更新html中的文本。你不想用页面刷新来重新渲染，因为根据你的解释，这似乎不是你想要的。你知道一首好的芭蕾舞曲，我可以从中改进和改进它吗？你的间歇期需要更高。除非您处理的数据量很小，并且您的webservice服务器与数据库服务器运行在同一台机器上，否则100ms不会减少。要么它将获取大量内容并同时尝试显示它们，要么它将破坏您的页面布局并返回大量超时/空响应。您的AI无法写入数据库，只能写入websocket，完成后写入数据库。请使用ratchet。Web服务器和BDD位于同一台计算机上。我们将根据你的建议努力做点什么。谢谢Web服务器和BDD位于同一台计算机上。我们将根据你的建议努力做点什么。谢谢绝对不是，我在寻找朋友的帮助，我在谷歌上搜索教程绝对不是，我在寻找朋友的帮助，我在谷歌上搜索教程

<?php
$dbhandle = new PDO("mysql:host=localhost;dbname=writing", "root", "*********");//this connects to your mysql table
$sql = "SELECT text, id, date FROM table_02 ;"; //thise is your query, where you select what data you want from the table
$query = $dbhandle->prepare($sql); 

if ($query->execute() == FALSE)
    { die("Query error: " . implode($query->errorInfo(), ' ')); } //this is a measure to close the connection if there is an error

    echo('<table>');
        echo('<tr><th>Test</th></tr>');
        while ($row = $query->fetch()) {
            echo('<tr>');
                ##echo('<td>'.$row ['id'].'</td>');
                ##echo('<td>'.$row ['date'].'</td>');
                echo('<td>'.$row ['text'].'</td>');
            echo('</tr>');
        }
    echo('</table>');
?>

var period = 100; //NOTE: period is passed in milliseconds
            setInterval(page_refresh, period);