当Ajax获取新数据时自动运行JavaScript

现在我有两个javascript，一个叫做auto_refresh.js，我使用ajax不断地从mysql数据库获取新数据（这部分已经完成）

auto_refresh.js

var mainDisplayCacheData;
var mainDisplayData = $('.aside').html();
var auto_refresh = setInterval(
function()
{
    $.ajax({
        url: 'main_display.php',
        type: 'POST',
        data: mainDisplayData,
        dataType: 'html',
        success: function(mainDisplayData){
            if(mainDisplayData !== mainDisplayCacheData){
                mainDisplayCacheData = mainDisplayData;
                $('.aside').html(mainDisplayData);
            }
        }
    })
}, 1000);

display.php

<div class="aside">
  <?php
    $tm = TicketManager::getInstance();
    $tm->displayMainTicket();
    $ticket = $tm->mainTicketSound();
  ?>
</div>

票务管理公司

public function mainTicketSound()
{
    $conn = DBManager::getConnection();

    $query = "SELECT queue_id, ticket_name FROM queue
              WHERE DATE(response_time) = DATE(NOW())
              ORDER BY response_time DESC
              LIMIT 1
              ";

    $results = @$conn->query($query);
    if ($results === FALSE or $results === NULL)
      throw new DatabaseErrorException($conn->error);

    if ($results->num_rows < 1)
    {
        $results->close();  
    }
    else
    {
        while($rows = @$results->fetch_array())
        {
            $ticketname = $rows['ticket_name'];
            return $ticketname;
        }
    }

}

公共功能mainTicketSound（）
{
$conn=DBManager:：getConnection（）；
$query=“从队列中选择队列\u id、票证\u名称
其中日期（响应时间）=日期（现在（））
按响应时间顺序描述
限制1
";
$results=@$conn->query（$query）；
如果（$results==FALSE或$results==NULL）
抛出新的DatabaseErrorException（$conn->error）；
如果（$results->num_rows<1）
{
$results->close（）；
}
其他的
{
而（$rows=@$results->fetch_array（））
{
$ticketname=$rows['ticket_name']；
返回$ticketname；
}
}
}

音频功能

var input = "<?php echo $ticket; ?>";

            var files = ["0.mp3", "1.mp3",
                         "2.mp3", "3.mp3",
                         "4.mp3", "5.mp3",
                         "6.mp3", "7.mp3",
                         "8.mp3", "9.mp3"];
            var audio = document.createElement("audio");

            var audioIdx = 0;
            var playById = function (id) {
                audio.src = files[input[id]];
              audio.play();
            };

            audio.addEventListener('ended', function () {
              audioIdx++;
              if (audioIdx >= files.length) audioIdx = 0;
              playById(audioIdx);
            });

            audio.src = files[input[audioIdx]];
            audio.play();

var输入=”；
var files=[“0.mp3”，“1.mp3”，
“2.mp3”，“3.mp3”，
“4.mp3”，“5.mp3”，
“6.mp3”，“7.mp3”，
“8.mp3”、“9.mp3”]；
var audio=document.createElement（“音频”）；
var audioIdx=0；
var playById=函数（id）{
audio.src=文件[input[id]]；
音频播放（）；
};
audio.addEventListener（'end'，函数（）{
audioIdx++；
如果（audioIdx>=files.length）audioIdx=0；
playById（audioIdx）；
});
audio.src=文件[input[audioIdx]]；
音频播放（）；

然后我有另一个脚本，用于播放音频文件。究竟播放哪些文件取决于ajax从数据库中获取的新数据。在我的例子中，我希望我的第二个脚本基于变量$ticket运行文件

---

音频脚本已完成并运行良好。但是，它只在我刷新页面时播放声音。我需要它在auto_refresh.js获取新数据时自动运行。请帮助，谢谢。

调用此块中其他脚本中的声音播放功能：

if(mainDisplayData !== mainDisplayCacheData){
  // e.g. otherScriptFunction();
}

在服务器端：您应该回显“$ticket”变量

在客户端：在“成功”ajax回调中调用声音播放函数：

这可能有助于“大局”

请注意，

display.php

中的代码仅在页面最初加载时运行一次。每次接收到新数据时都需要运行该代码

因此，必须创建一个新的php文件，该文件通过POST接收新数据，并返回（通过

echo

not

return

）所需的$ticket值。在第一个AJAX调用的success函数中，将此页面作为AJAX调用调用调用。大概是这样的：

自动刷新.js

var mainDisplayCacheData;
var mainDisplayData = $('.aside').html();
var auto_refresh = setInterval(
function(){
    $.ajax({
        url: 'main_display.php',
        type: 'POST',
        data: mainDisplayData,
        dataType: 'html',
        success: function(mainDisplayData){
            if(mainDisplayData !== mainDisplayCacheData){
                mainDisplayCacheData = mainDisplayData;
                $('.aside').html(mainDisplayData);
                $.ajax({
                    url: 'new_php_file.php',
                    type: 'post',
                    data: mainDisplayData,
                    success: function(axData){
                        var files = ["0.mp3", "1.mp3",
                                     "2.mp3", "3.mp3",
                                     "4.mp3", "5.mp3",
                                     "6.mp3", "7.mp3",
                                     "8.mp3", "9.mp3"];

                        //below element already exists. You should update it rather than creating another
                        var audio = document.createElement("audio");

                        var audioIdx = 0;
                        var playById = function (id) {
                            audio.src = files[axData[id]]; //axData returned by AJAX
                          audio.play();
                        };

                        audio.addEventListener('ended', function () {
                          audioIdx++;
                          if (audioIdx >= files.length) audioIdx = 0;
                          playById(audioIdx);
                        });
                        audio.src = files[input[audioIdx]];
                        audio.play();
                    }
                });
            }
        }
    });
}, 1000);

new\u php\u file.php

<?php
    $new_data = $_POST['mainDisplayData'];

    //insert code required to run lines that follow, and/or modify as required
    $tm = TicketManager::getInstance();
    $tm->displayMainTicket();
    $ticket = $tm->mainTicketSound();
    echo $ticket;

---

能否指定从何处获取
$tm
变量？好的，问题已更新。如果使用此逻辑，HTML文件不会播放新视频，即使前一个已运行一半？您处理过这个案子吗？@gary它用于排队系统，柜台工作人员呼叫下一个号码，然后播放声音。因此每次播放只需几秒钟，由工作人员控制（等待声音结束，然后只单击下一步）…虽然当多个计数器同时单击下一步时仍可能发生崩溃..我愿意接受任何关于这方面的好建议issue@littlecoder我只是问你，因为你有固定的时间。就这些。从技术上讲，你应该处理这个点击事件。在ajax的成功中创建一个播放功能，该功能应该可以正常工作。很抱歉信息不足，我已经用添加的音频功能更新了帖子…如果需要更多信息，请告诉我。。。顺便说一句，您的解决方案看起来不错，我会试试，谢谢，仅供参考，display.php中的代码一直在运行，除了“$ticket=$tm->mainTicketSound（）行之外；这意味着我可以从$tm->displayMainTicket中连续获取新数据，而无需刷新页面，但音频可以快速更新以回答问题，只是为了让您开始。希望您能够找到如何编辑它以使其工作。祝您好运。
<?php
    $new_data = $_POST['mainDisplayData'];

    //insert code required to run lines that follow, and/or modify as required
    $tm = TicketManager::getInstance();
    $tm->displayMainTicket();
    $ticket = $tm->mainTicketSound();
    echo $ticket;