MySQL veritabanı değerlere dayalı JQuery kullanarak dinamik Kayar Panel

1 Cevap php

Benim üniversite için akademik bir aracı geliştirme sürecinde duyuyorum. Sorun bildirimi kullanıcı derslerin bir listesini verilecektir vardır. Biri tabii ki belirli bir isme tıkladığında, o ders amaç ve tabii ki diğer ayrıntıları gösteren dinamik bir slayt paneli almalısınız. Tüm bu değerler, bir MySQL veritabanı mevcut olacaktır. Slayt paneli burada bir zorunluluktur gerekliliktir. Yani mySQL veritabanından slayt panelinde dinamik veri almak için nasıl bana yardım edin. Şimdiden teşekkürler ... :)

1 Cevap

JQuery'nin $. ajax senin arkadaşın!

Aşağıdaki gibi bir şey (Denenmemiş ve optimize değil) çalışması gerekir. Umarım bu doğru yönde götürecektir. Sen should aynı zamanda bir yükleme mesajı, hata işleme ve veri önbelleğe alma ekleyin.

<style>
    .course{
        border:solid 1px #000;
        margin-bottom:10px;
    }
    .title{
        display:block;
        border-bottom:solid 1px #000;
        background:#eee;
        font-weight:bold;
    }
    .details{
        display:none;
    }
</style>
<div class='course'>
    <a class='title' href='/classDetails.php?classID=54321'>Composition 101</a>
    <div class='details'></div>
</div>
<div class='course'>
    <a class='title' href='/classDetails.php?classID=54322'>Composition 201</a>
    <div class='details'></div>
</div>
<div class='course'>
    <a class='title' href='/classDetails.php?classID=54323'>Composition 301</a>
    <div class='details'></div>
</div>
<script>
    $(function(){
         $(".course").each(function(){
             var self = $(this);
             $(".title",self).click(function(){
                 $.ajax({
                     "url":this.href,
                     "success":function(data){
                          // extract the content you need from the HTML page.
                          var content= $(data).find("#content").html()
                          // insert into the details div and then show it.
                          self.find(".details").html(content).slideDown(1000);
                     }
                 });
                 // prevent default action...
                 return false;
             });
        });
    });
</script>

Ayrıca, bu gibi arama kolaylaştırmak için $. Ajax bazı soyutlamalar olduğunu unutmayın (örneğin $ ("# myElement"). Yük (url), $. Yazılan ve $ gibi. Olsun). Sen http://api.jquery.com/category/ajax/ de bu yöntemler hakkında daha fazla bilgi bulabilirsiniz

etiketler