Php 使用JQuery的动态滑动面板，基于mySQL数据库中的值

我正在为我的大学开发一个学术工具包。问题是，用户将获得一个课程列表。当点击课程的特定名称时，他会看到一个动态的幻灯片面板，显示课程目标和该课程的其他细节。所有这些值都将出现在mySQL数据库中。此处必须安装滑动面板。因此，请帮助我如何从mySQL数据库动态获取幻灯片面板中的数据。提前感谢……：）

http://api.jquery.com/jQuery.ajax/“>jQuery的$.ajax是您的朋友

类似于以下的东西应该可以工作（它未经测试，也未经过优化）。希望它能把你引向正确的方向。您还应该添加加载消息、错误处理和数据缓存

<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>

.当然{
边框：实心1px#000；
边缘底部：10px；
}
.头衔{
显示：块；
边框底部：实心1px#000；
背景：#eee；
字体大小：粗体；
}
.详情{
显示：无；
}
$（函数（）{
$（“.course”）。每个（函数（）{
var self=$（这是）；
$（“.title”，self）。单击（函数（）{
$.ajax({
“url”：this.href，
“成功”：功能（数据）{
//从HTML页面提取所需的内容。
var content=$（data.find（#content”）.html（）
//插入到details div中，然后显示它。
self.find（“.details”）.html（content.slideDown（1000）；
}
});
//防止默认操作。。。
返回false；
});
});
});

---

还要注意的是，$.ajax的一些抽象使得这样的调用更容易（例如，$（“#myElement”）.load（url）、$.post和$.get）。您可以在

上找到有关这些方法的更多信息。是的，这样就可以了。但是如果您了解jQuery，那么有很多比这更酷的解决方案。而且互动性更强。我同意。“我在这里选择的是basic”。@Reigel和David，非常感谢您的评论和回复：）如果我的答案解决了您的问题，请随意标记为已接受。