Ajax+springboot实现三级联动(接二级联动)

数据库
县区级
Ajax+springboot实现三级联动(接二级联动)_第1张图片
Entiey

package f.demo.Entity;
import javax.persistence.*;
@Table
@Entity(name = "dq")
public class Dq {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int did;
    private int dgid;
    private String dname;
    public String getDname() {
        return dname;
    }
    public int getDgid() {
        return dgid;
    }
    public void setDgid(int dgid) {
        this.dgid = dgid;
    }
    public void setDname(String dname) {
        this.dname = dname;
    }
    public int getDid() {
        return did;
    }
    public void setDid(int did) {
        this.did = did;
    }
}

Dao部分
DqDao

package f.demo.IStudentDao;
import f.demo.Entity.Dq;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import java.util.List;
public interface DqDao extends JpaRepository<Dq,Integer> {
    @Query(value="select * from dq where dgid=?1",nativeQuery=true)
    //查询县区
    List<Dq> findByCid1(int dgid);
}

Contruller部分
student

//联动内容
@Autowired
ClassesService classesService;
@Autowired
GradeService gradeService;
@Autowired
DqService dqService;
/**     * 查询省的表    * @return 年级表查询的结果集    */
@RequestMapping("findAllGrade")
@ResponseBody
public Iterable<Grade> findAllGrade(){
    //返回省表查询的结果集
     return gradeService.findAll11();
}
/**     * 查询市表     * @param request 获取gid用来做班级表的查询    * @return 返回班级表查询的结果集  */
@RequestMapping("doCheckCname")
@ResponseBody
public Iterable<Classes> doCheckCname(HttpServletRequest request){
    //获取gid用来做市表的查询
     Integer gid = Integer.parseInt(request.getParameter("gid"));
     //返回班级表查询的结果集
     return classesService.findByCid(gid);
}
/**     * 查询区域表    * @param request 获取gid用来做区域的查询     * @return 返回区域表查询的结果集  */
@RequestMapping("doCname")
@ResponseBody
public Iterable<Dq> doCname(HttpServletRequest request){
    //获取gid用来做区域表的查询
    Integer dgid = Integer.parseInt(request.getParameter("dgid"));
    //返回区域表查询的结果集
    return dqService.findAll(dgid);
}

VUE部分

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head>
<body>
<div id="app">
    <form>
        姓名:<input type="text" v-model="AA.sname"><br>
        性别:<input type="text" name="sex" v-model="AA.sex"><br>
        <!--三级联动-->
        省份:
        <select v-model="AA.gid" v-on:change="doCheckCname()">
<!--                        gid是市级的外键-->
            <option value="0">--省份选择--</option>
            <option v-for="F in BB" :value="F.ggid">{{F.gname}}</option>
<!--                                        ggid是省的编号(主键),gname是省的名称-->
        </select><br>:
        <select v-model="AA.dgid" v-on:change="doCname()">
            <option value="0">--市县选择--</option>
            <option v-for="Q in cla " :value="Q.ccid">{{Q.cname}}</option>
        </select>
        <br>
        县:
        <select v-model="AA.cid">
            <!--         cid(studetn表中的)是表连接的外键,不论联动是多少级最后一个就是这个-->
            <option value="0">--县选择--</option>
            <option v-for="ela in ela" :value="ela.did">{{ela.dname}}</option>
        </select>
        <br>
        <br>
        <input type="button" name="submit" value="保存" v-on:click="doAdd()">
    </form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            AA:{gid:0,dgid:0,cid:0},//数组统计传入控制器
            BB:[],//给省份做一个空数组
            cla:[],//市数组
            ela:[],//县数组
        },
        mounted(){
            //先调用一下选择年级的代码 同样是链接数据库
            this.doCheckGrade();
        },
        methods:{
            doAdd:function () {
                $.ajax({
                    url: "http://localhost:8080/student1/doAdd1",
                    data: vm.AA,
                    dataType: 'json',
                    success: function (data) {
                        alert(JSON.stringify(data));
                        vm.AA={};
                    },
                })
            },
            //doAdd结束
            /**
             * 这部分是用来查询省份表的一个方法
             */
            doCheckGrade:function () {
                $.post("http://localhost:8080/student1/findAllGrade",{},function (data) {
                    var len = data.length;[]
                    for (var i=0;i<len;i++){
                        vm.BB.push(data[i]);
                    }
                });
            },//doCheckGrade结束
            /**
             * 这个方法用来查询市县
             * */
            doCheckCname:function () {
                $.post("http://localhost:8080/student1/doCheckCname",{gid:vm.AA.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结束
            doCname:function () {
                $.post("http://localhost:8080/student1/doCname",{dgid:vm.AA.dgid},function (data) {
                    vm.ela=[];
                    var len = data.length;
                    for (var i=0;i<len;i++) {
                        vm.ela.push(data[i]);
                    }
                });
            },//doCheckCname结束
        },//methods结束
    });
</script>
</body>
</html>

你可能感兴趣的:(Ajax+springboot实现三级联动(接二级联动))