刷新歌曲标题而不重新加载整个页面

Refresh song title without reloading the whole page

本文关键字：加载 新加载 标题 刷新      更新时间：2023-09-26

我正在用正在播放的歌曲/艺术家的信息构建一个Shoutcast音频播放器。我有两个独立的变量（$song和$artist），它们的值在歌曲每次更改时都会更新。

以下是代码摘录：

<?php
$ip = "111.111.111";
$port = "9436";
$fp = @fsockopen($ip,$port,$errno,$errstr,1);
if (!$fp) 
    { 
    echo "Streaming offline momentaneamente"; // Displays when sever is offline
    } 
    else
    { 
    fputs($fp, "GET /7.html HTTP/1.0'r'nUser-Agent: Mozilla'r'n'r'n");
    while (!feof($fp)) 
        {
        $info = fgets($fp);
        }
    $info = str_replace('</body></html>', "", $info);
    $split = explode(',', $info);
    if (empty($split[6]) )
        {
        echo "Streaming offline"; // Displays when sever is online but no song title
        }
    else
        {
        $title = str_replace('''', '`', $split[6]);
        $title = str_replace(',', ' ', $title);
        $split = explode(' - ', $title);
        $artist = trim($split[0]);
        $song = trim($split[1]);
        }

    }
function truncate($string, $length, $dots = "...") {
    return (strlen($string) > $length) ? substr($string, 0, $length - strlen($dots)) . $dots : $string;
}
?>
<div class="player-item-ref acdc">
    <a class="player-link" href="#">
        <h2>AC/DC</h2>
        <ul><!-- THIS UL CONTAINS THE ITEMS TO BE REFRESHED -->
            <li class="song-title"><?php echo truncate("$song", 35); ?></li>
            <li class="song-artist"><?php echo truncate("$artist", 38); ?></li>
        </ul>
    </a>
</div><!-- /.player-container -->

我尝试用JavaScript刷新5秒，但它会影响整个页面（包括播放器）。我想做一个函数，在不重新加载整个页面的情况下刷新这些变量。

您所需要的只是问题的标签：JavaScript、PHP和AJAX。

你需要这些东西：

  1. 用PHP创建一个端点，它只返回歌曲/艺术家信息，例如JSON或XML格式
  2. 将JavaScript代码放在播放器的页面中，播放器周期性地（例如，1或5秒内一次）从点1调用端点（例如，使用JavaScript函数XMLHttpRequest），并替换DOM的一部分，其中包含歌曲/艺术家信息（可能是DIV/SPAN和一些ID）

仅此而已。这两种东西合在一起被称为AJAX。这个缩写最初的意思是异步JavaScript和XML，但您也可以使用JSON或纯HTML作为端点的响应，而不仅仅是XML。AJAX并不是真的，它只是JavaScript中异步调用技术的一个昵称。

用最愚蠢的方式：想象一下，你的HTML页面上有一个播放器：

<div>Now playing: <span id="now_playing"></span></div>

创建一个JavaScript代码，每1秒执行一次，它将调用您在问题中发布的PHP脚本，该脚本将当前播放的歌曲作为文本返回，不包含任何其他内容（仅为"Artist-song"），JavaScript代码将其（覆盖以前的内容）放入span#now_playing中。仅此而已。

相关文章：