Ajax三级联动
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>