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/

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

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

1 个答案: