我似乎无法让 AJAX/JS 重新加载 PHP 脚本并更新各种页面元素

Question

所以情况就是这样。我正在构建一个页面来托管托管在 Icecast 服务器上的广播流。我让播放器工作得很好，并拼凑了一个 PHP 脚本来从服务器中提取和解析各种数据点。当前曲目、听众人数等信息。

这就是问题所在。首次打开页面时它加载正常，但我无法找到一种方法让这些变量每 5-10 秒左右更新一次，并在不完全重新加载页面的情况下使用新信息更新页面（这是毕竟广播电台，每 10 秒重新缓冲一次电台是不可行的。

在从代码中删除了各种尝试之后，这就是我目前所做的。有任何想法吗？我已经看到它针对一两个变量完成了，但我在这里几乎有十几个......

            <div id="current_song"></div>

            <script language="javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
            <script language="javascript"> 
            {
              $.ajax({
                type: 'POST',
                url: 'script.php',
                data: 'getLatestInfo',
                dataType: 'json',
                cache: false,
              success : function(dp){
                $.getJSON('script.php', function(dp) {
            //'data' will be the json that is returned from the php file
                $.("#current_song").html("dp[9]");
            });
               getlatest();
              };
              });
            }
            </script> 

这里是 PHP 解析器

<?php 
Function getLatestInfo() {

$SERVER = 'http://chillstep.info:1984'; 
$STATS_FILE = '/status.xsl?mount=/test.mp3'; 
$LASTFM_API= '27c480add2ca34385099693a96586bd2'; 

//create a new curl resource 
$ch = curl_init(); 

//set url 
curl_setopt($ch,CURLOPT_URL,$SERVER.$STATS_FILE); 

//return as a string 
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); 

//$output = our stauts.xsl file 
$output = curl_exec($ch); 

//close curl resource to free up system resources 
curl_close($ch); 

//loop through $ouput and sort into our different arrays 
$dp = array(); 

$search_for = "<td\s[^>]*class=\"streamdata\">(.*)<\/td>"; 
$search_td = array('<td class="streamdata">','</td>'); 

if(preg_match_all("/$search_for/siU",$output,$matches)) { 
   foreach($matches[0] as $match) { 
      $to_push = str_replace($search_td,'',$match); 
      $to_push = trim($to_push); 
      array_push($dp,$to_push); 
   } 
} 
$x = explode(" - ",$dp[9]); 

echo json_encode($dp);
}
 ?>

我知道它看起来还不漂亮，但这就是 CSS 的用途，对吧？

有什么想法吗？本质上，我需要 PHP 脚本重新运行、更新变量并重建文本输出，而无需触及音频标签。

Answer 1

Javascript 是在客户端（在网站访问者机器上）执行的代码，而 PHP 是在服务器端执行的代码。在不重新加载整个页面的情况下将内容插入页面的方法是使用 Javascript 将代码注入 HTML。现在，例如，假设您的服务器上有一个名为 getLatest.php 的 PHP 文件，其中包含一个名为 getLatestVariables() 的函数，该函数找出所有变量的最新值并返回包含它们的数组。你可以做的是使用javascript从getLatest.php调用getLatestVariables()，当函数返回数组时，它会将它返回给javascript。一旦变量数组返回到 javascript，您就可以将变量插入 HTML div，而无需刷新整个页面。

调用 php 函数我建议使用 jquery 来执行 ajax 调用 还要插入从 php 返回的数据，jquery 也是你最好的选择。

Answer 2

为此，您需要客户端 JavaScript。掌握基本的 ajax 书籍。 您可以请求脚本每 5 秒更新一次数据并在页面上更新，这很复杂，需要一些 JavaScript 知识。 脚本也必须是新的，或者编辑此脚本以跟踪请求类型并相应地返回数据。

var url="http://script-address"
var req = new XMLHttpRequest(); // Begin a new request
req.open("GET", url); // An HTTP GET request for the url
req.send(null);

这是检查响应的方法

req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
//we got a complete valid HTTP response
var response = req.responseText; 
//code to handle response
}

Answer 3

php 是一种服务器端语言，因此在页面中重新运行 php 将始终导致整个页面刷新，但是如果您使用 javascript ajax 调用（我建议使用 jquery）到不同的 php 文件，则该 php 文件可以在服务器端执行而不影响您的页面。然后，您可以从这个 php 文件中将新找到的变量返回到 javascript，并将它们插入到 ajax 调用的回调中。

查看这个question的答案

如果您需要更多详细信息，请告诉我...

Answer 4

    $.getJSON('phpFileThatReturnsJSON.php', function(data) {
//'data' will be the json that is returned from the php file
$.("#idOfDivToInsertData").html("an item from the json array ie data['song']");
});

查看有关 ajax 调用的 JQuery 文档，如果您已经做到了这一点，您应该能够很快找到它。 也不要忘记在您的 html 标头中包含 jquery 库...

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>