springboot AJAX 一二三级列表联动

springboot AJAX 联动
1.创建onchange事件


以上两步后,f12 右侧console可以出现对应的数字

2.使页面数据返回controller控制层

以上步骤以后,可以在控制台看到页面的返回值

3.controller控制层代码完整如下

@RequestMapping("/GoodsInfo/ajaxQueryByPid")
    @ResponseBody
    public List<CategoryTwo> ajaxQueryByPid(Integer pid){
        System.out.println("pid = " + pid);
        List<CategoryTwo> list = categoryTwoService.queryByPid(pid);
        System.out.println("list = " + list);
        return list ;
    }

二级分类模型层

二级分类xml文件下,sql代码如下

<select id="selectListByPid" resultMap="resultMap">
        select ctwo_id, cone_id, ctwo_name, ctwo_num, ctwo_code, ctwo_info
        from category_two
        where cone_id = #{pid}
    </select>

以上代码后控制层可以根据页面的返回值查询对应的数据库信息并返回控制层

4.add_goodsinfo.html 页面层完整代码如下

function ajaxCtwo() {
			//$("[name = cthrId]").empty(); //aa.三级分类联动后接剪切至这里
			var proid = $("#coneId").val();
			console.log(proid);
			var url = "/GoodsInfo/ajaxQueryByPid";
			var data = {"pid":proid};
			$.ajax({
				async:false,
				type:"post",
				url : url ,
				data : data,
				success:function (resp) {
					$("[name = ctwoId]").empty();
					console.log(resp);
					if (resp.length > 0){
						$.each(resp,function (i,item) {
							console.log(item.ctwoId+":"+item.ctwoName)
							$("<option value='"+ item.ctwoId +"'>"+item.ctwoName+"</option>").appendTo("[name = ctwoId]");
						})
						ajaxCthr();//bb.自动联动三级用的,没有三级分类,这行删除
					}
				},
				dataType:"json"
			})
		}

至此,最后完成联动的效果如下

5.三级分类的联动与二级类似,代码如下

@RequestMapping("/GoodsInfo/ajaxQueryByThrPid")
    @ResponseBody
    public List<CategoryThree> ajaxQueryByThrPid(Integer pid){
        System.out.println("pid = " + pid);
        List<CategoryThree> list = categoryThreeService.queryByThrPid(pid);
        System.out.println("list = " + list);
        return list ;
    }

categoryThree模型层代码

@Override
    public List<CategoryThree> queryByThrPid(Integer pid) {
        return categoryThreeMapper.selectListByThrPid(pid);
    }

xml文件

<select id="selectListByThrPid" resultMap="resultMap">
        select cthr_id, cone_id, ctwo_id, cthr_name, cthr_num, cthr_code, cthr_info
        from category_three
        where ctwo_id = #{id}
    </select>

add_goodsinfo.html

function ajaxCthr() {
			var proid = $("#ctwoId").val();
			console.log(proid);
			var url = "/GoodsInfo/ajaxQueryByThrPid";
			var data = {"pid":proid};
			$.ajax({
				async:false,
				type:"post",
				url : url ,
				data : data,
				success:function (resp) {
					$("[name = cthrId]").empty();//aa.联动后剪切至二级分类,否则会有bug
					console.log(resp);
					if (resp.length > 0){
						$.each(resp,function (i,item) {
							// console.log(item.ctwoId+":"+item.cthrId)
							$("<option value='"+ item.cthrId +"'>"+item.cthrName+"</option>").appendTo("[name = cthrId]");
						})
					}
				},
				dataType:"json"
			})
		}

6.最后注意上述aa. ,bb. 的注释,bb.完成自动联动,
aa.解决一级分类下空,三级分类仍会现值的问题
最终效果如下