【问题标题】:Reload a DIV without reloading the whole page?重新加载 DIV 而不重新加载整个页面?
【发布时间】:2016-04-19 19:10:36
【问题描述】:

我有一个 Wordpress 主题,它的页脚有一个粘性音频播放器,正在播放 Shoutcast 广播电台。

我正在从另一个 PHP 文件将歌曲艺术家/标题详细信息调用到粘贴栏中,它显示正常,但它永远不会更新。我只需要此文本内容每 10 秒重新加载一次,而无需重新加载整个网页。

有人可以建议如何做到这一点吗?提前谢谢你。

网站演示:http://gulsonpower.com/the80s/

这是带有音频播放器的主题中的 PHP 文件的代码:

(收音机播放器.php)

<?php 
$radio_ip = get_option('atp_radiostream_id');
$radio_autoplay = get_option('atp_radio_autoplay');
$radio_title = get_option('atp_radio_title');
$radio_desc = get_option('atp_radio_desc');
$atp_playlist_volume = get_option( 'atp_playlist_volume' )  ? get_option( 'atp_playlist_volume' ) : '0.6';
?>
<script type="text/javascript">
jQuery(document).ready(function($){
    var stream = {
        mp3: "<?php echo $radio_ip; ?>"
    },

    ready = false;

    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            ready = true;
            $(this).jPlayer("setMedia", stream)<?php if($radio_autoplay =='on'){ ?>.jPlayer("play")<?php } ?>;
        },
        pause: function() {
            $(this).jPlayer("clearMedia");
        },
        error: function(event) {
            if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
                // Setup the media stream again and play it.
                $(this).jPlayer("setMedia", stream)<?php if($radio_autoplay =='on'){ ?>.jPlayer("play")<?php } ?>;

            }
        },
        swfPath: "<?php echo get_template_directory_uri(); ?>/js",
        volume: <?php echo $atp_playlist_volume; ?>,
        supplied: "m4a, oga, mp3",
        preload: "none",
        wmode: "window",
        keyEnabled: true

    });

    //    songs played in single page  every thing

        var my_jPlayer = jQuery("#jquery_jplayer_1");

        jQuery(".fap-single-track").click(function(e) {
                my_jPlayer.jPlayer("setMedia", {
                    mp3: jQuery(this).attr("href"),
                    title: jQuery(this).attr("title"),

                });
                var first_track = true;
                my_jPlayer.jPlayer("play");
                first_track = false;
                $(this).blur();
                return false;
        });

});
</script>
<div id="jp_container_1" class="jp-audio jp-radio">

    <div class="jp-type-single">
        <div class="jp-gui jp-interface">
        <div class="jp-inner">
        <div class="jp-close-btn">+</div>
            <ul class="jp-controls">
                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-progress">
                <strong class="jp-title"><?php echo $radio_title ?></strong>
                <span class="jp-title" style="display:block;"><?php include 'now-playing.php' ?></span>
            </div>
            <div class="jp-time-holder">
                <div class="jp-current-time"></div>

            </div>
            <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
            </div>
        </div>
        </div>

    </div>
</div>

它正在调用(now-playing.php)

<?php
/*

Now Playing PHP script for SHOUTcast

This script is (C) MixStream.net 2008

Feel free to modify this free script 
in any other way to suit your needs.

Version: v1.1

*/


/* ----------- Server configuration ---------- */

$ip = "streaming.the80s.com.au";
$port = "80";

/* ----- No need to edit below this line ----- */
/* ------------------------------------------- */
$fp = @fsockopen($ip,$port,$errno,$errstr,1);
if (!$fp) 
    { 
    echo "Connection refused"; // Diaplays 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 "The current song is not available"; // Diaplays when sever is online but no song title
        }
    else
        {
        $title = str_replace('\'', '`', $split[6]);
        $title = str_replace(',', ' ', $title);
        echo "$title"; // Diaplays song
        }
    }
?>

【问题讨论】:

标签: javascript php jquery ajax


【解决方案1】:

如果您使用 ajax,这可能是一个示例:

         $(document).ready(function() {
             $("#player").html('').load("what-isplaying.php");
               var refreshId = setInterval(function() {
                $("#player").html('').load("what-isplaying.php");
           }, 4000);
           $.ajaxSetup({ cache: false });
        });

#player 所在的 DIV 应该包含歌曲的名称,而 what-is-playing.php 应该仅包含带有歌曲名称的回声,每 4 次刷新一次秒。

只是一个例子,你自己去改进吧。

【讨论】:

    【解决方案2】:

    有几个框架可以为您执行ajax 技巧,例如jquery 例如,在 jquery 中,您可以这样做

    $( "#result" ).load( "my-php-page-that-returns-what-i-want.php" );
    

    无论如何,我都会看看这棵 Jquery 方法树,开始你的异步生活学习之旅。

    $.get
    $.post
    $.load
    

    【讨论】:

      【解决方案3】:

      因为您已经在使用代码中的 Jquery jQuery(document).ready 看一下 Jquery Ajax 函数: http://api.jquery.com/jquery.ajax/

      要每 10 秒加载一次,请使用 JS 间隔 http://www.w3schools.com/jsref/met_win_setinterval.asp

      【讨论】:

        【解决方案4】:

        您可以在jquery中使用load函数

        <?php 
        $radio_ip = get_option('atp_radiostream_id');
        $radio_autoplay = get_option('atp_radio_autoplay');
        $radio_title = get_option('atp_radio_title');
        $radio_desc = get_option('atp_radio_desc');
        $atp_playlist_volume = get_option( 'atp_playlist_volume' )  ? get_option( 'atp_playlist_volume' ) : '0.6';
        ?>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript">
        function loadlink(){
            $('.jp-progress span.jp-title').load('now-playing.php',function () {
                 $(this).unwrap();
            });
        }
        jQuery(document).ready(function($){
            loadlink(); // This will run on page load
            setInterval(function(){
                loadlink() // this will run after every 5 seconds
            }, 5000);
            var stream = {
                mp3: "<?php echo $radio_ip; ?>"
            },
        
            ready = false;
        
            $("#jquery_jplayer_1").jPlayer({
                ready: function (event) {
                    ready = true;
                    $(this).jPlayer("setMedia", stream)<?php if($radio_autoplay =='on'){ ?>.jPlayer("play")<?php } ?>;
                },
                pause: function() {
                    $(this).jPlayer("clearMedia");
                },
                error: function(event) {
                    if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
                        // Setup the media stream again and play it.
                        $(this).jPlayer("setMedia", stream)<?php if($radio_autoplay =='on'){ ?>.jPlayer("play")<?php } ?>;
        
                    }
                },
                swfPath: "<?php echo get_template_directory_uri(); ?>/js",
                volume: <?php echo $atp_playlist_volume; ?>,
                supplied: "m4a, oga, mp3",
                preload: "none",
                wmode: "window",
                keyEnabled: true
        
            });
        
            //    songs played in single page  every thing
        
                var my_jPlayer = jQuery("#jquery_jplayer_1");
        
                jQuery(".fap-single-track").click(function(e) {
                        my_jPlayer.jPlayer("setMedia", {
                            mp3: jQuery(this).attr("href"),
                            title: jQuery(this).attr("title"),
        
                        });
                        var first_track = true;
                        my_jPlayer.jPlayer("play");
                        first_track = false;
                        $(this).blur();
                        return false;
                });
        
        });
        </script>
        <div id="jp_container_1" class="jp-audio jp-radio">
        
            <div class="jp-type-single">
                <div class="jp-gui jp-interface">
                <div class="jp-inner">
                <div class="jp-close-btn">+</div>
                    <ul class="jp-controls">
                        <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                        <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                        <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                        <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                        <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                        <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                    </ul>
                    <div class="jp-progress">
                        <strong class="jp-title"><?php echo $radio_title ?></strong>
                        <span class="jp-title" style="display:block;"><?php include 'now-playing.php' ?></span>
                    </div>
                    <div class="jp-time-holder">
                        <div class="jp-current-time"></div>
        
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                </div>
                </div>
        
            </div>
        </div>

        【讨论】:

        • 谢谢islamoc 我不太确定该代码应该放在哪里。能否请您将其放在 (radio-player.php) 的修订完整版中?
        • 谢谢。我已经上传了它,但它似乎现在让播放器停止工作? gulsonpower.com/the80s
        • 您使用的是旧版本的 jquery,它给出了 Uncaught TypeError: $ is not a function 请升级 jQuery 的版本并重试我已添加如果您想在本地添加它,您可以也这样做
        • 感谢 islamoc,我将 jquery 的主题版本更新到了 2.1.1,但它仍然没有重新加载,而且它似乎与播放器中的内容显示混淆了。你有什么其他的建议?再次感谢。
        • islamoc 感谢您在这方面的帮助。您还有其他建议吗?或者我应该尝试使用 ajax 吗?
        猜你喜欢
        • 2013-09-18
        • 1970-01-01
        • 2013-10-28
        • 1970-01-01
        • 2013-06-21
        • 2014-09-06
        • 1970-01-01
        • 2013-02-22
        • 1970-01-01
        相关资源
        最近更新 更多