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

Question

现在我有两个 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);

显示.php

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

ticketmanaget.inc

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;
        }
    }

}

音频功能

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();

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

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

Answer 1

这可能有助于“全局”。

请注意，display.php 中的代码仅运行一次 - 当页面最初加载时。每次收到新数据时，您都需要运行该代码。

因此，您必须创建一个新的 php 文件，通过 POST 接受新数据，并返回(通过 echo 而不是 return)所需的 $ticket 值。在第一个 AJAX 调用的成功函数内将此页面作为 AJAX 调用调用。像这样:

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);
                $.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_php_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;