重新加载DIV而不重新加载整个页面
Reload a DIV without reloading the whole page?
我有一个Wordpress主题,它的页脚有一个粘性音频播放器,正在播放Shoutcast电台。
我从另一个PHP文件将歌曲艺术家/标题的详细信息调用到粘性条中,它显示得很好,但从未更新。我只需要这个文本内容每10秒重新加载一次,而不需要重新加载整个网页。
有人能告诉我怎么做吗?提前感谢您。
现场演示:http://gulsonpower.com/the80s/
这是具有音频播放器的主题中的PHP文件的代码:
(radio player.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>
它正在调用(现在正在播放.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
}
}
?>
如果您使用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秒刷新一次。
举个例子,你自己去改进吧。
有几种框架可以为您提供ajax技巧,例如jquery例如,在jquery中,您可以执行以下
$( "#result" ).load( "my-php-page-that-returns-what-i-want.php" );
在任何情况下,我都会研究一下这个树Jquery方法,以开始您在异步生活中的学习之旅。
$.get
$.post
$.load
因为您已经在使用代码中的Jquery jQuery(document).ready
看看Jquery Ajax函数:http://api.jquery.com/jquery.ajax/
要每隔10秒加载一次,请使用JS间隔http://www.w3schools.com/jsref/met_win_setinterval.asp
您可以在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>
相关文章:
- 在新的浏览器选项卡上加载新的aspx页面后调用JavaScript函数
- 更改css链接并等待加载新的css
- 如何在Ajax加载新内容时停止JavaScript执行
- 当在ng视图中加载新路由时,Tabbing(tabindex)针对错误的元素
- 如何使用输入数据加载新的extjs图表
- JQuery Masonry.Ajax图标和“;加载新项目”;绳子放错地方了
- 通过javascript在同一个打开的选项卡中重新加载新的网页内容
- 当用户到达页面右侧时加载新内容
- 数据表 AJAX 筛选器重新加载数据
- 超链接单击以加载新页面并执行JavaScript
- 单击时加载新的 SVG
- 在RadWindow中加载新页面,然后从加载的窗体中关闭窗口
- ajax在页面刷新之前不会加载新的sql结果
- 谷歌地图API-在从ajax页面加载新数据之前清除标记、多段线
- 使用Ajax加载页面,并在必要时加载新脚本
- 加载新页面时的过渡效果,AJAX
- Ajax没有正确加载新页面
- 正在加载新的Javascript,但正在调用旧的Javascript.MVC
- 咕噜咕噜的手表:实时加载重新加载落后 1 步....
- 我怎么能有一个花哨的盒子一样的弹出体加载,但与cookie不连续加载重新加载