流派在页面的回显
点击流派的"摇滚"对应的就是下面的点击事摸件，"摇滚"其实就是其中一个 标签
//指定点击事件 (".filter p a").click(function () {
接着，JS会进行处理，作用是**当前行里，只允许一个被选中，**点了摇滚就不能再点别的，此时的状态：摇滚：class="current"，其他流派：没 class
//移除同辈的a链接的样式 (this).siblings().removeClass("current"); //把点击的a链接的样式加上 (this).addClass("current");
接着，JS 从"当前选中状态"中读值
谁是current，就拿谁的值。因为点了"摇滚"，所以拿"摇滚"的值,即tid和isHot
//获得流派的选中值 var tid = ("a[ftype='mtype'][class='current']").attr("value"); var isHot = $("a[ftype='isHot'][class='current']").attr("value");
JS拼URL，整页刷新。
执行完这一步：
所有 JS 状态瞬间清空
浏览器重新请求 controller
接下来一切由后端接管
window.location.href = "/songer/dofindAll?tid="+tid+"&isHot="+isHot;
Controller的请求变成了
/songer/dofindAll?tid=3&isHot=1
spring自动做
public String songerList(SongerQuery songerQuery, Model model) { // mq.tid = 3 // mq.isHot = 1 }
查数据:controller → service → mapper → SQL
Page<Songer> page = songerService.selectByPage(songerQuery);
得到符合条件的歌手列表,此时：
-
SQL 已经执行完了
-
分页已经完成
-
list 里 只剩符合 tid / isHot 条件的数据
后面做的分组等功能都是基于这个list
List<Songer> list = page.getList();
塞进model
model.addAttribute("mq",songerQuery); model.addAttribute("sList",sList);
返回给前端
return "songers";