Question

我是PHP / Ajax / Html的新手，所以这是我的宝贝问题（我正在制作一个广播电台网站），

test.php 向我的服务器查询当前播放的歌曲名称。

listen.php 在'refreshTitle' div标签中显示此歌曲名称。

当我的电台改变歌曲时，有一个30秒的延迟，所以我想做的是每秒钟获得歌曲标题，如果标题与实际听到的不同，则比较/延迟显示的更新，轻松腻吧？！这是 listen.php ：

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
    function get_XmlHttp() {
        // create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
        var xmlHttp = null;

        if (window.XMLHttpRequest) {        // for Firefox, IE7+, Opera, Safari, ...
            xmlHttp = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {    // for Internet Explorer 5 or 6
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        return xmlHttp;
    }

    function ajaxrequest(php_file, tagID) {
        var request = get_XmlHttp();        // call the function for the XMLHttpRequest instance

        // create pairs index=value with data that must be sent to server
        var d = new Date();
        var t = d.toLocaleTimeString();
        var the_data = 'test=' + t; 
        //append time purely for testing to make sure text updates

        request.open("POST", php_file, true);           // set the request

        // adds  a header to tell the PHP script to recognize the data as is sent via POST
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send(the_data);     // calls the send() method with datas as parameter

        // Check request status
        // If the response is received completely, will be transferred to the HTML tag with tagID
        request.onreadystatechange = function () {
            if (request.readyState == 4) {
                document.getElementById(tagID).innerHTML = request.responseText;
            }
        }

    }

    setInterval(
        function () {
            ajaxrequest('test.php', 'refreshTitle')
        }, 1000); // refresh every 10000 milliseconds
    //This time val should vary based on the song title retrieved during the last second

</script>

在页面其他部分的某处，我有这个：

 echo "<div id=\"refreshTitle\" style=\"float:left; padding-top:6px;\">\n";
 echo "</div>\n";

在 test.php （带有歌曲名称的文件）中，我有：

if (isset($_POST['test'])) {
$str = $_POST['test']; // get data
echo $dnas_data['SONGTITLE'] . " Current time " . $str;
}

所以基本上每一秒我都会把时间发送到 test.php ，然后回复它，并且我假设的回声用这一行输入'refreshTitle'：

document.getElementById(tagID).innerHTML = request.responseText;

我想要做的是在 listen.php 中将歌曲标题放入我的javascript中，并且只在一些字符串比较/延迟逻辑后运行ajax请求。

对于长篇大论的描述感到抱歉，但我很困惑，并且认为我已经完成了这件事:)请让我知道任何想法......

Answer 1

首先，我建议您更新您的jQuery版本（1.3有点旧，当前版本为2+）。
更重要的是，AJAX请求在jQuery中非常好抽象：你可以使用load（）函数来简单地加载元素内容。
资料来源：http://api.jquery.com/load/

使用PHP和Ajax获取/替换div标签的内容

1 个答案: