springboot整合Mybatis（利用了Mybatis的反向工程自动生成pojo，mapper接口和xml文件）+Ajax+jQuery实现下拉列表联动

最新推荐文章于 2021-07-11 16:49:37 发布

@小匠

最新推荐文章于 2021-07-11 16:49:37 发布

阅读量129

点赞数

分类专栏： JavaStudy2020 Java 文章标签： mybatis jquery ajax json

本文链接：https://blog.csdn.net/qq_45629145/article/details/111356564

版权

Java 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

JavaStudy2020

35 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script th:src="@{/js/jquery-3.5.1.js}"></script>
<script>
    $(function () {
        $('#s1').blur(function () {
            //获取所选的id
            var id = $('#s1').val();
            $.ajax({
                type: "GET",
                url:"/city",
                data: {id},
                dataType: "json",
                success: function (result) {
                    $('#s2').empty();
                    $.each(result,function () {
                        $('#s2').append("<option value='"+this.id+"'>"+this.name+"</option>")
                    })
                }
            })
        })
    })
</script>
<body>
<select id="s1">
    <option th:each="n:${allName}" th:text="${n.name}" th:value="${n.id}"></option>
</select>
<select id="s2">
</select>
</body>
</html>

@Controller
@RequestMapping("")
public class IndexController {
    @Autowired
    private ProvinceService provinceService;
    @Autowired
    private CityService cityService;

    @RequestMapping("/index")
    public String findAllName(Model model) {
        List<Province> allName = provinceService.findAllName();
        model.addAttribute("allName",allName);
        return "/index/index";
    }

    //根据传入的省份id查找该省份所有的城市
    @RequestMapping("/city")
    @ResponseBody
    public List<City> selectAllCity(Integer id) {
        System.out.println(id);
        List<City> city = cityService.selectAllCity(id);
        System.out.println(city);
        return city;
    }
}

@小匠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springboot整合Mybatis（利用了Mybatis的反向工程自动生成pojo，mapper接口和xml文件）+Ajax+jQuery实现下拉列表联动

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>Title</title></head><script th:src="@{/js/jquery-3.5.1.js}"></script><script>..
复制链接

扫一扫