springboot-thyemleaf-ajax-省市二级联动

闲鱼不翻身1111

已于 2023-02-07 16:11:55 修改

阅读量277

点赞数 1

文章标签： spring boot java

于 2023-02-06 10:18:48 首次发布

本文链接：https://blog.csdn.net/m0_72309077/article/details/128897062

版权

该文章展示了一个使用JavaSpringBoot框架，结合MyBatis进行数据库操作，实现在前端通过Ajax异步请求获取省市区数据并动态填充下拉列表的示例。Pojo类定义了City对象，Mapper接口及XML配置文件定义了SQL查询，Service和Controller层处理业务逻辑，前端使用jQuery进行Ajax请求和DOM操作。

摘要由CSDN通过智能技术生成

City表的Sql语句已在主页发出

pojo

@Data
@AllArgsConstructor
@NoArgsConstructor
public class City {
private int id;
private String name;
private Integer pid;

}

mapper

@Mapper
public interface CityMapper {

List<City> findSheng(int pid);

List<City> findCity(int id);

}

service

public interface CityService {

    List<City> findSheng(int Pid);
    List<City> findCity(int id);

}

serviceImpl

@Service
public class CityServiceImpl implements CityService{

    @Autowired
    CityMapper cityMapper;

    @Override
    public List<City> findSheng(int Pid) {
        return cityMapper.findSheng(Pid);
    }

    @Override
    public List<City> findCity(int id) {
        return cityMapper.findCity(id);
    }

}

controller

@Controller
public class CityController {

    @Resource
    private  CityServiceImpl service;

    @RequestMapping("show")
    public String show(){
        return "show";
    }

    @RequestMapping("/findSheng")
    @ResponseBody
    public String findSheng(ServletRequest request){
        String Pid = request.getParameter("pid");
        List<City> shengList = service.findSheng(Integer.parseInt(Pid));

        String shengs = JSON.toJSONString(shengList);
        return shengs;
    }


    @RequestMapping(value = "/findCity")
    @ResponseBody
    public String findCity(ServletRequest request){

        String id = request.getParameter("id");

        List<City> list = service.findCity(Integer.parseInt(id));

        String citys = JSON.toJSONString(list);

        return citys;
    }
}

mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zm.mapper.CityMapper">

    <select id="findSheng" resultType="com.zm.pojo.City">
        select * from city where Pid = #{Pid}
    </select>
    
    <select id="findCity" resultType="com.zm.pojo.City">
        select * from city where Pid = #{id}
    </select>


</mapper>

前端html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
</head>
<body>

<center>
    <td>
       省： <select name="sheng" id="sheng" style="width: 150px">===请选择省===</select>

       市： <select name="city" id="city" style="width: 150px" >===请选择市===</select>
    </td>
</center>

</div>
</body>

<script type="text/javascript" src="webjars/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">

    $.get("/findSheng", {pid:0}, function (shengs){

        var shengs1 = JSON.parse(shengs)
        $("#city").text("")
        for (var i = 0; i < shengs1.length; i++) {
            $("#sheng").append("<option value='" + shengs1[i].id + "'>" + shengs1[i].name + "</<option>");
        }
    });


    $("#sheng").change(function () {

        var pid = $("select option:selected").attr("value");


        $.get("/findCity", {id:pid}, function (citys) {
            var citys1 = JSON.parse(citys);
            $("#city").text("")
            for (var i = 0; i < citys1.length; i++) {

                $("#city").append("<option value='" + citys1[i].id + "'>" + citys1[i].name + "</<option>");
            }
        })
    })

</script>

</html>

pojo

<dependencies>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.1</version>
        </dependency>

        <!--jquery依赖-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.5.1</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.16.18</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>