我有一个创建接口的项目，以列出大约 50 个广播电台。现在，我有列出所有 50 个无线电的界面，以及无需重新加载页面的电台切换。我目前使用停靠在页面底部的 DIV 隐藏了 Divs，然后当用户单击电台徽标时，它会更改div 内容并显示请求的电台内容以及播放器。但是，由于页面加载时隐藏了所有工作站的 Div 及其内容，因此加载时间很长。所以，我想简单地播放仍然阻止页面重新加载，但这次通过使用像PHP，jQuery，Ajax这样的数字脚本。以下是我想在好人的帮助下实现的一个例子：http://www.radioways.fr/webradios/radio-fm.html
与其加载所有站，我想在 MySQL 中列出它们并使用 PHP/jQuery/Ajax 脚本从数据库中获取请求的站数据，并将其替换为底部停靠 DIV 中的当前数据(站名、播放网址、联系人等......
我正在向这里的温柔的人寻求帮助，他们可能已经有类似的脚本或建议我遵循任何方法......
提前感谢，
谢谢TymeJV回复我。但是我在PHP编码方面非常有限，这就是为什么我要求一个完整的示例代码是可能的。
这是我目前使用的 HTML/JavaScript 代码：标头中的 JS：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var speed = 500;
var animating = false;
$("a.nav").click(function(){
if ((!animating) && $("#"+$(this).attr("rel")).is(":hidden"))
{
animating = true;
var requestedDiv = "#"+$(this).attr("rel");
$("#radiolisting").children("div").each(function(){$(this).fadeOut(speed/2)});
$("#radiolisting").animate({height: $(requestedDiv).height()}, speed);
$(requestedDiv).delay(speed/1.5).fadeIn(speed);
setTimeout(function(){animating = false}, speed*2);
}
return false;
});
});
</script>
用于列出广播电台的 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>000000</title>
<style type="text/css">
#radiolisting div{display:none}
#radiolisting div#001{display:block}
</style>
<link href="css/melo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--start container -->
<div id="container">
<div class="content" align="center">
<div height="160" width="430"><img class="float-center" src="images/logo.png" align="center" /></a>
<br />
</div>
<main>
<!--station logo listing with rel to change the content without reloading the page -->
<div class="box" id="box">
<a href="#" class="nav" title="Radio" rel="001"><img class="float-left" src="radio/002.jpg" alt="Click here to listen to this Station" align="center" height="83" width="160" /></a>
</div>
<div class="box" id="box">
<a href="#" class="nav" title="Radio" rel="003"><img class="float-left" src="radio/003.gif" alt="Click here to listen to this Station" align="center" height="83" width="160" /></a>
</div>
<div class="box" id="box">
<a href="#" class="nav" title="Radio" rel="004"><img class="float-left" src="radio/004.jpg" alt="Click here to listen to this Station" height="83" width="160" /></a>
</div>
<div class="box" id="box">
<a href="#" class="nav" title="Radio" rel="005"><img class="float-left" src="radio/005.png" alt="Click here to listen to this Station" height="83" width="160" /></a>
</div>
<div class="box" id="box">
<a href="#" class="nav" title="Radio Cenner FM Dakar" rel="ceeneer"><img class="float-left" src="radio/006.jpg" alt="Click here to listen to this Station" height="83" width="160" /></a>
</div>
<div class="box" id="box">
<a href="#" class="nav" title="Radio Jant bi FM Touba" rel="jantbifm"><img class="float-left" src="radio/007.jpg" alt="Click here to listen to this Station" height="83" width="160" /></a>
</div>
<div class="box" id="box">
<a href="#" class="nav" title="Radio 000" rel="008"><img class="float-left" src="radio/008jpg" alt="00" height="83" width="160" /></a>
</div>
<div class="box" id="box">
<a href="#" class="nav" title="Radio 000" rel="lampfm"><img class="float-left" src="radio/009" alt="Click here to listen to this Station" height="83" width="160" /></a>
</div>
</div>
</main>
</div>
<!--end container -->
<!--station content listing -->
<div id="radiolisting">
<div id="002" class="rajo">
<p class="leeral">
Nom De la Station: 000<br />
Frequence FM MHz: n/a <br />
Site de Transmission: Italie <br />
Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>
</p>
<p style="float:left; padding-left: 5px;">
radio player embed code</div>
<div id="002" class="rajo">
<p class="leeral">
Nom De la Station: 000<br />
Frequence FM MHz: n/a <br />
Site de Transmission: Italie <br />
Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>
</p>
<p style="float:left; padding-left: 5px;">
radio player embed code</div>
<div id="003" class="rajo">
<p class="leeral">
Nom De la Station: 000<br />
Frequence FM MHz: n/a <br />
Site de Transmission: Italie <br />
Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>
</p>
<p style="float:left; padding-left: 5px;">
radio player embed code</div>
<div id="004" class="rajo">
<p class="leeral">
Nom De la Station: 000<br />
Frequence FM MHz: n/a <br />
Site de Transmission: Italie <br />
Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>
</p>
<p style="float:left; padding-left: 5px;">
radio player embed code</div>
<div id="005" class="rajo">
<p class="leeral">
Nom De la Station: 000<br />
Frequence FM MHz: n/a <br />
Site de Transmission: Italie <br />
Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>
</p>
<p style="float:left; padding-left: 5px;">
radio player embed code</div>
<div id="006" class="rajo">
<p class="leeral">
Nom De la Station: 000<br />
Frequence FM MHz: n/a <br />
Site de Transmission: Italie <br />
Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>
</p>
<p style="float:left; padding-left: 5px;">
radio player embed code</div>
<div id="007" class="rajo">
<p class="leeral">
Nom De la Station: 000<br />
Frequence FM MHz: n/a <br />
Site de Transmission: Italie <br />
Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>
</p>
<p style="float:left; padding-left: 5px;">
radio player embed code</div>
<div id="008" class="rajo">
<p class="leeral">
Nom De la Station: 000<br />
Frequence FM MHz: n/a <br />
Site de Transmission: Italie <br />
Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>
</p>
<p style="float:left; padding-left: 5px;">
radio player embed code</div>
</div>
</body>
</html>
实际上很简单，因为上面没有代码，我会给你一些示例代码。因此，底部码头的div 可能看起来像这样：
<div id="ajaxContainer"></div>
您的无线电应包含要发送回服务器进行查询的电台value：
<input type="radio" name="station" value="rock101.7" /> Rock Radio!
现在，您将需要一个在单击收音机时触发的change事件：
$(":radio[name=station]").change(function() {
//Lets start that AJAX
$.ajax({
url: url, //url to php func
data: {radio: this.value}, //this.value will be whatever the value attr of the radio element is, in this case: "rock101.7"
dataType: 'json', //change to whatever datatype your RECEIVING from the server
success: function(data) {
//data is the data received back from the server, so just send it to your container
$("#ajaxContainer").html(data); //replace all content in #ajaxContainer with your content back from the server
}
});
});
在PHP方面，你可以用一个简单的方法来接收你的POST变量：
$param = $_POST['radio']; //radio is the key we defined above in the 'data' portion of the AJAX call.
基本上就是这样！