Ajax实现最简单的省市二级联动

最新推荐文章于 2024-05-16 04:46:22 发布

2021_fc

最新推荐文章于 2024-05-16 04:46:22 发布

阅读量683

点赞数 2

文章标签： java ajax

本文链接：https://blog.csdn.net/weixin_45310564/article/details/106321642

版权

AJAX实现最简单的省市二级联动

实现效果我这里不会搞动图-_- 难受

在这里插入图片描述
我这里使用的是springboot的项目

这里我对Mybatis进行了整合大家有需要可以去看一下我之前的文章跳转

项目结构

在这里插入图片描述

MySql 表数据

在这里插入图片描述

编写Sql

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="myframe.com.mjw.dao.CityDao">
    <resultMap id="getCityMap" type="myframe.com.mjw.entity.City">
        <result column="city_id" property="cityId" jdbcType="VARCHAR"/>
        <result column="parent_id" property="parentId" jdbcType="VARCHAR"/>
        <result column="city_name" property="cityName" jdbcType="VARCHAR"/>
    </resultMap>
    <select id="queryCityList" resultMap="getCityMap" parameterType="java.util.Map">
        select c.city_id,c.parent_id,c.city_name from city c where c.parent_id = #{id}
    </select>
</mapper>s

编写实体类

public class City {
    private String cityId;
    private String parentId;
    private String cityName;
    public String getCityId() { return cityId; }
    public void setCityId(String cityId) { this.cityId = cityId; }
    public String getParentId() { return parentId; }
    public void setParentId(String parentId) { this.parentId = parentId; }
    public String getCityName() { return cityName; }
    public void setCityName(String cityName) { this.cityName = cityName; }
}

编写controller

@RestController
@RequestMapping("/selectCity")
public class CityLinkedController {

    @Autowired
    ICityDBService service;
    @RequestMapping("/selectProvince")
    public List<City> selectProvince(HttpServletRequest request){
        String id = request.getParameter("id");
        Map<String,Object> map = new HashMap<>();
        map.put("id",id);
        List<City> list = service.quertCityList(map);
        return list;
    }
}

编写Service

@Service
public class CityDBServiceImp implements ICityDBService {  //我这里接口没有贴上来
    @Autowired
    CityDao cityDao;

    @Override
    public List<City> quertCityList(Map<String,Object> map) {
        List<City> list = cityDao.queryCityList(map);
        return list;
    }
}

编写dao

@Mapper
public interface CityDao {
    public List<City> queryCityList(Map<String,Object> map);
}

HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.min.js"></script>
</head>
<body>
    <select id="selectProvince" >
        <option selected = selected>--请选择--</option>
    </select>
    <select id="selectCity">
        <option selected = selected>--请选择--</option>
    </select>
</body>
<script type="text/javascript">
    $(function () {
        loadProvince();
        //加载省份
        $("#selectProvince").change(function () {
           var ciryId =  $("#selectProvince").val();
            $.post("/selectCity/selectProvince",
                {id:ciryId},
                function (data) {
                    //我们需要将第一行option意外的其他option清空
                    $("#selectCity :gt(0)").remove();
                    for (var index=0;index<data.length;index++){
                        $("#selectCity").append("<option>"+data[index].cityName+"</option>>")
                    }
                },
                "json"
            )
        })
    });

    function loadProvince() {
        $.post("/selectCity/selectProvince",
            {id:0},
            function (data) {
                for (var index=0;index<data.length;index++){
                    $("#selectProvince").append('<option value="'+data[index].cityId+'">'+data[index].cityName+'</option>')
                }
            },
            "json"
        )
    }
</script>
</html>

我在这里简单讲一下流程吧就是先遍历省份的信息，将数据往province的select里面动态的添加option。

获取到省份信息之后我们使用change事件，当我们选择某个省份的时候将该省份的id以Ajax的方式提交给服务器，执行sql查询将结果返回，往city的select里动态的添加option。这里需要注意的就是每次选择之后需要删除上一次在city里面的数据

ect里面动态的添加option。

获取到省份信息之后我们使用change事件，当我们选择某个省份的时候将该省份的id以Ajax的方式提交给服务器，执行sql查询将结果返回，往city的select里动态的添加option。这里需要注意的就是每次选择之后需要删除上一次在city里面的数据

其实已经有很多插件可以帮我们达到这样的功能了，并且展现的效果更加好看比如说easyUi的combox控件就可以，大家有需要的话可以去试试。

2021_fc

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现最简单的省市二级联动

AJAX实现最简单的省市二级联动实现效果我这里不会搞动图-_- 难受我这里使用的是springboot的项目这里我对Mybatis进行了整合大家有需要可以去看一下我之前的文章跳转项目结构MySql 表数据编写Sql<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/my
复制链接

扫一扫