spring boot使用Ajax，实现三级联动功能

spring boot使用Ajax，实现三级联动功能

三级联动：举个例子 比如说我们在填写资料的时候，点击某个省，就会出现这个省的下级单位 “市”，当是选定之后，就会出现当前“市”的下级单位——‘县’，这个就是三级联动。同理，四级联动就是选中当前县，出现当前县的夏季单位。 想要实现三级联动，共有两大模块。 （一）前端 （二）后端 我们先写后端代码,但是我们首先把数据库搭建好。

院系表 专业表 班级表 项目目录 书写新建的数据库-表的实体类 Faculty.java(院系)

package com.sdbairui.demo.Entity; import javax.persistence.*; @Table @Entity(name="faculty") public class Faculty { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private int fid; private String fname; public int getFid() { return fid; } public void setFid(int fid) { this.fid = fid; } public String getFname() { return fname; } public void setFname(String fname) { this.fname = fname; } }

Grade.java(专业)

package com.sdbairui.demo.Entity; import javax.persistence.*; @Table @Entity(name="grade") public class Grade { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private int gid; private String gname; private int fid; public int getGid() { return gid; } public void setGid(int gid) { this.gid = gid; } public String getGname() { return gname; } public void setGname(String gname) { this.gname = gname; } public int getFid() { return fid; } public void setFid(int fid) { this.fid = fid; } }

classes.java(班级)

package com.sdbairui.demo.Entity; import javax.persistence.*; @Table @Entity(name = "classes") public class Classes { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private int cid; private String cname; private int gid; @ManyToOne @JoinColumn(name = "gid",referencedColumnName = "gid",insertable = false,updatable = false) private Grade grade; public Grade getGrade() { return grade; } public void setGrade(Grade grade) { this.grade = grade; } public int getCid() { return cid; } public void setCid(int cid) { this.cid = cid; } public String getCname() { return cname; } public void setCname(String cname) { this.cname = cname; } public int getGid() { return gid; } public void setGid(int gid) { this.gid = gid; } }

Dao层 IFaculty.java

package com.sdbairui.demo.Dao; import com.sdbairui.demo.Entity.Faculty; import org.springframework.data.jpa.repository.JpaRepository; public interface IFaculty extends JpaRepository<Faculty,Integer> { }

IGrade.java

package com.sdbairui.demo.Dao; import com.sdbairui.demo.Entity.Grade; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.Query; import java.util.List; public interface IGrade extends JpaRepository<Grade,Integer> { @Query(value="select * from grade where fid=?1",nativeQuery=true) List<Grade> findByFid(int fid); }

IClasses.java

package com.sdbairui.demo.Dao; import com.sdbairui.demo.Entity.Classes; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.Query; import java.util.List; public interface IClasses extends JpaRepository<Classes,Integer> { @Query(value="select * from classes where gid=?1",nativeQuery=true) List<Classes> findByCid(int cid); }

Service层 FacultyService.java

package com.sdbairui.demo.Service; import com.sdbairui.demo.Dao.IFaculty; import com.sdbairui.demo.Entity.Faculty; import org.apache.ibatis.annotations.Result; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.List; @Service public class FacultyService { @Resource IFaculty iFaculty; public List<Faculty> findAll(){ return iFaculty.findAll(); } }

GradeService.java

package com.sdbairui.demo.Service; import com.sdbairui.demo.Dao.IGrade; import com.sdbairui.demo.Entity.Grade; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.List; @Service public class GradeService { @Resource IGrade iGrade; public List<Grade> findAll(){ return iGrade.findAll(); } public List<Grade> findByFid(int fid){ return iGrade.findByFid(fid); } }

ClassesService.java

package com.sdbairui.demo.Service; import com.sdbairui.demo.Dao.IClasses; import com.sdbairui.demo.Entity.Classes; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.List; @Service public class ClassesService { @Resource IClasses iClasses; public List<Classes> findAll(){ return iClasses.findAll(); } public List<Classes> findByCid(int cid){ return iClasses.findByCid(cid); } }

Controller层

@RequestMapping("/doCheckCname") @ResponseBody public List<Classes> doCheckCname(HttpServletRequest request){ Integer gid=Integer.parseInt(request.getParameter("gid")); return classesService.findByCid(gid); } @RequestMapping("/findAllGrade") @ResponseBody public List<Grade> findAllGrade(HttpServletRequest request){ Integer fid=Integer.parseInt(request.getParameter("fid")); return gradeService.findByFid(fid); } @RequestMapping("/doCheckFname") @ResponseBody public List<Faculty> doCheckFname(){ return facultyService.findAll(); }

前端代码 jQuery+Ajax

<div id="append"> <table border="1" v-show="show"> <tr> <td>学生姓名：<input type="text" name="birthday" v-model="add.sname"></td> </tr> <tr> <td>学生性别： <select v-model="add.sex"> <option value="1">男</option> <option value="2">女</option> </select> </td> </tr> <tr> <td>入学时间：<input type="date" name="birthday" v-model="add.birthday"></td> </tr> <tr> <td> 系部： <select v-model="add.fid" v-on:change="doCheckGrade()"> <option value="0">--请选择系部--</option> <option v-for="fname in faculty" :value="fname.fid">{{fname.fname}}</option> </select><br> 级部： <select v-model="add.gid" v-on:change="doCheckCname()"> <option value="0">--请选择级部--</option> <option v-for="gname in grade" :value="gname.gid">{{gname.gname}}</option> </select><br> 班级： <select v-model="add.cid"> <option value="0">--请选择班级--</option> <option v-for="cla in cla" :value="cla.cid">{{cla.cname}}</option> </select> </td> </tr> <tr> <td> <button v-on:click="save()">保存</button> </td> </tr> </table> </div> <script type="text/javascript"> var vm = new Vue({ el: "#root", data: { faculty:[], grade:[], cla:[], like: {}, add: {gid:0,cid:0,sex:'男',fid:0}, }, mounted() { this.doCheckFname(); // var time=setInterval(this.getDates,3000) }, methods: { doAdd:function () { //alert(JSON.stringify(vm.persons)); $.post("http://localhost:8080/student/doAdd",{personData:JSON.stringify(vm.add)},function (data) { if (data.status == 1){ alert(data.success); window.location.href="http://localhost:8080/student/vue_select"; } }); },//doAdd结束 /** * 这部分是用来查询年级表的一个方法 */ doCheckGrade:function () { vm.add.gid=0; $.post("http://localhost:8080/student/findAllGrade",{fid:vm.add.fid},function (data) { //alert(JSON.stringify(data)); vm.grade=[]; var len = data.length; for (var i=0;i<len;i++){ vm.grade.push(data[i]); } }); },//doCheckGrade结束 /** * 查询完年级，关联班级表 * 这个方法用来查询班级 * */ doCheckCname:function () { //alert(this.gid); vm.add.cid=0; $.post("http://localhost:8080/student/doCheckCname",{gid:vm.add.gid},function (data) { //alert(JSON.stringify(data)); vm.cla=[]; var len = data.length; for (var i=0;i<len;i++) { vm.cla.push(data[i]); } }); },//doCheckCname结束 doCheckFname:function () { $.post("http://localhost:8080/student/doCheckFname",{},function (data) { //alert(JSON.stringify(data)); var len = data.length; for (var i=0;i<len;i++){ vm.faculty.push(data[i]); } }); },//doCheckFname结束 }//methods结束 }),//vue结束 </script>