0

我有一个创建界面来列出大约 50 个广播电台的项目。现在，我的界面列出了所有 50 台收音机，并且无需重新加载页面即可切换电台。我目前使用停靠在页面底部的 DIV 隐藏了 Div，然后当用户单击电台徽标时，它会更改 div 内容并显示所请求电台的内容以及播放器。但是由于页面加载时所有站的 Div 及其内容都隐藏起来，加载需要很长时间。所以，我想简单地播放仍然阻止页面重新加载 onclick，但这次使用 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>
4

1 回答 1

0

其实很简单，因为上面没有代码，我给你一些示例代码。因此，您在底部码头的 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.

基本上就是这样！

于 2013-10-03T17:08:41.250 回答