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

Question

我正在为我的大学开发一个学术工具包。问题陈述是，用户将获得一个课程列表。当单击该课程的特定名称时，他应该得到一个动态幻灯片面板，显示该课程的课程目标和其他详细信息。所有这些值都将出现在 mySQL 数据库中。滑动面板是这里的必备要求。所以请帮助我如何从 mySQL 数据库中动态获取幻灯片面板中的数据。在此先感谢... :)

Answer 1

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>

还要注意，$.ajax 有一些抽象可以使这样的调用更容易（例如 $("#myElement").load(url)、$.post 和 $.get）。您可以在http://api.jquery.com/category/ajax/

找到有关这些方法的更多信息