Получите данные динамически и покажите их в нижнем DIV - JQuery Ajax

Question

Получите данные динамически и покажите их в нижнем DIV - JQuery Ajax

0

У меня есть проект создания интерфейса для перечисления около 50 радиостанций. Теперь у меня есть интерфейс, в котором перечислены все 50 радиостанций и переключение станций без перезагрузки страницы. В настоящее время я использую DIV, прикрепленный к нижней части страницы с скрытыми Divs, а затем, когда пользователь нажимает на логотип станции, он меняет содержимое div и показывает требуемое содержимое станции вместе с игроком. Но по мере того, как страница загружается со всеми разделяемыми разделами, скрытыми вместе с их содержимым, загрузка занимает очень много времени. Таким образом, я хотел бы просто воспроизвести все еще предотвращение перезагрузки страницы onclick, но на этот раз с помощью динамического скрипта, такого как PHP, jQuery, Ajax. Вот пример того, что я хотел бы реализовать с помощью хороших парней здесь: http://www.radioways.fr/webradios/radio-fm.html

Вместо того, чтобы загружать все станции, я хотел бы перечислить их в MySQL и использовать скрипт PHP/jQuery/Ajax для получения запрошенных данных станции из БД и заменить его текущими данными в пристыкованном DIV внизу (станция имя, игровой URL, контакт и т.д.)

Я ищу помощь от нежных парней, которые могут иметь уже похожий сценарий или посоветовать мне любой способ следовать...

Заранее спасибо,

Спасибо 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>

Ilimaan 03 окт. 2013, в 20:00

Источник

Теги:

php

jquery

1 ответ

Ещё вопросы

tymeJV · Answer 1 · 2013-10-03T15-41-00.000Z

Довольно просто, так как там нет кода выше, я дам вам некоторый пример кода. Итак, ваш 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.

И это в основном это!

@Ilimaan - Я не совсем уверен, насколько вам нужен более полный сэмпл, я понятия не имею, как выглядит ваш бэкэнд. Вам нужно будет пройти некоторые уроки и руководства по ускоренному курсу PHP, чтобы запустить его.
Спасибо, TymeJV, я добавил код HTML / JS, который сейчас использую. Пожалуйста, просмотрите его и посмотрите, что вы можете предложить мне, чтобы улучшить его.