springboot + mybatis 三级联动

最新推荐文章于 2023-12-21 15:07:17 发布

ddfabc

最新推荐文章于 2023-12-21 15:07:17 发布

阅读量716

点赞数

文章标签： mybatis spring boot java

本文链接：https://blog.csdn.net/m0_60459789/article/details/128000757

版权

一、省市县三级联动

效果图

选择省后出现市

选择市后出现县

现在开始上代码

pojo层

这里是有三个数据库，分别建的实体类，数据库可以百度找

dao层

这是查询的sql语句，之后调用方法进行查询

service层

由于这次技术是第一次写，所以省略了service层为了更快的实现效果，后面理解原理之后可以自行加上

controller层

@Controller
public class cityController {
    @Autowired
    private cityDao cityDao;

    /**
     * 查询省分类
     * @return List<province>
     */
    @RequestMapping("/allProvince")
    @ResponseBody
    public List<province> allProvince() {
        System.out.println(cityDao.allProvince());
        return cityDao.allProvince();
    }

    /**
     * 查询市分类
     * @return List<province>
     */
    @RequestMapping("allCity")
    @ResponseBody
    public List allCity(@RequestParam("pid") Integer id) {
        return cityDao.allCity(id);
    }

    /**
     * 查询县分类
     * @return List<province>
     */
    @RequestMapping("allTown")
    @ResponseBody
    public List allTown(@RequestParam("id") Integer id) {
        return cityDao.allTown(id);
    }

    /**
     * 主页
     * @return ModelAndView
     */
    @RequestMapping("index")
    @ResponseBody
    public ModelAndView index() {
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("index");
        return modelAndView;
    }
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<script src="jquery-3.3.1.min.js"></script>
<body>
<form action="">
    省：<select class="a"></select>
    市：<select class="b"></select>
    县：<select class="c"></select>
</form>

<script>
    $(function () {
        $.getJSON('http://localhost:808/allProvince', '', function (data) {
            console.log(data)
            for (var a = 0; a < data.length; a++) {
                var b = "<option value=" + data[a].code + ">" + data[a].name + "</option>";
                $(".a").append(b);
            }
            ;
        });
        $(".a").blur(function () {
            var z = $(this).val();

            $.getJSON('http://localhost:808/allCity', 'pid=' + z, function (data) {
                console.log(data)
                $(".b").children().remove();
                $(".c").children().remove();
                for (var a = 0; a < data.length; a++) {
                    var b = "<option value=" + data[a].code1 + ">" + data[a].name1 + "</option>";
                    $(".b").append(b);
                }
            });
        });
        $(".b").blur(function () {
            var c = $(this).val();
            $.getJSON('http://localhost:808/allTown', 'id=' + c, function (data) {
                console.log(data)
                $(".c").children().remove();
                for (var a = 0; a < data.length; a++) {
                    var city = "<option value=" + data[a].code1 + ">" + data[a].name + "</option>";
                    $(".c").append(city);
                }
            });
        });
    })
</script>
</body>
</html>

jquery包要特别注意，没有的话可以从百度找

网站：jquery下载所有版本（实时更新）

碰到问题不要着急，仔细看看，放松心态，再加上相信自己