Ajax 二级联动

Dear 丶 2023-05-31 06:36 11阅读 0赞

**准备工作导入vue&jquery的js包**

**导包部分省略不写**

接下来应该先写html页面的代码

<div id="app">
    	<form>
    		手机号：<input type="number" v-model="persons.phone" id="phone">
    		<span id="error"></span><br>
    		姓名：<input type="text" v-model="persons.name"><br>
    		级部：
    		<select v-model="persons.gid" v-on:change="doCheckCname()">
    			<option value="0">--请选择级部--</option>
    			<option v-for="gname in grade" :value="gname.ggid">{
       {gname.gname}}</option>
    		</select>
    		班级：
    		<select v-model="persons.cid">
    			<option value="0">--请选择班级--</option>
    			<option v-for="cla in cla" :value="cla.ccid">{
       {cla.cname}}</option>
    		</select>
    		<br>
    		性别：<input type="radio" value="男" v-model="persons.sex">男
    			<input type="radio" value="女" v-model="persons.sex">女<br>
    		地址：
    			<select id="sheng" onchange="provincechange(this.selectedIndex)" v-model="sheng">
    				<option>请选择省</option>
    			</select>
    			省
    			<select id="shi" v-model="shi">
    				<option>请选择市</option>
    			</select>
    			市
    		<br>
    		爱好：篮球<input type="checkbox" value="篮球" v-model="hobbys">	  足球<input type="checkbox" value="足球"  v-model="hobbys">  排球<input type="checkbox" value="排球"  v-model="hobbys">
    		<br>
    		简介：<textarea rows="10" cols="20" v-model="persons.code"></textarea>
    		<br>
    		<input type="button" name="submit" value="保存" v-on:click="doAdd()">
    	</form>
    </div>

接下来是jQuery的实例代码

控制器代码实例部分

/**
    	 * 查询年级的表
    	 * @return 年级表查询的结果集
    	 */
    	@RequestMapping("findAllGrade")
    	@ResponseBody
    	public Iterable<Grade> findAllGrade(){
    		//返回年级表查询的结果集
    		return gradeService.findAll();
    	}
    
    	/**
    	 * 查询班级表
    	 * @param request 获取gid用来做班级表的查询
    	 * @return 返回班级表查询的结果集
    	 */
    	@RequestMapping("doCheckCname")
    	@ResponseBody
    	public Iterable<Cname> doCheckCname(HttpServletRequest request){
    		//获取gid用来做班级表的查询
    		Integer gid = Integer.parseInt(request.getParameter("gid"));
    		//返回班级表查询的结果集
    		return cnameService.findByGid(gid);
    	}

service代码实例部分

年级表service

/**
         * 查询grade表的全部数据
         * @return 这个表的数据集合
         */
        public Iterable<Grade> findAll(){
            return gradeDao.findAll();
        }

班级表service

/**
    	 * 传入级部id按级部id来查数据
    	 * @param gid
    	 * @return	返回查询的结果集
    	 */
    	public Iterable<Cname> findByGid(Integer gid){
    		return cnameDao.findByGid(gid);
    	}

可以调用dao层继承的接口的方法

班级表dao层

package com.msfh.demo.dao;
    
    import com.msfh.demo.eneity.Cname;
    import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
    import org.springframework.data.jpa.repository.Query;
    import org.springframework.data.repository.PagingAndSortingRepository;
    
    
    public interface CnameDao  extends PagingAndSortingRepository<Cname, Integer>, JpaSpecificationExecutor<Cname>{
    	@Query("from cname")
    	Iterable<Cname> findAll();
    	@Query(value = "select * from cname where ccid=?1",nativeQuery=true)
    	Cname findByCid(Integer ccid);
    
    	Iterable<Cname> findByGid(Integer gid);
    }

public interface CnameDao  extends PagingAndSortingRepository<Cname, Integer>, JpaSpecificationExecutor<Cname>
    
    
    Cname换成自己的实体
    Integer换成自己的主键

下面附上表

person表

![20191023093711757.png][]

cname(班级)表

![20191023093830144.png][]

grade(年级)表

![20191023093901407.png][]

[20191023093711757.png]: /images/20230531/2cb87f99b8de42bc81c77208d9f5db5f.png
[20191023093830144.png]: /images/20230531/1d85477f1ce94172b22964d3f87c0e77.png
[20191023093901407.png]: /images/20230531/7304e337981d4e1ab7ff1ab92e896e62.png