使用ajax实现省市区三级联动

最新推荐文章于 2022-08-21 09:53:10 发布

原创最新推荐文章于 2022-08-21 09:53:10 发布 · 508 阅读

4 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了一种基于Ajax和jQuery的级联下拉框实现方法，通过动态加载省、市、县数据，实现了下拉框的选择联动效果。首先，初始化页面时创建三个空的下拉框用于显示省、市、县信息。然后，使用Ajax向服务器发送请求获取省份数据，并将其填充到第一个下拉框中。接着，为省份下拉框添加事件监听器，当用户选择省份时，清空市和县下拉框并重新发送Ajax请求获取对应城市的列表，再将这些城市数据填充到市下拉框中。类似地，当用户选择城市后，再次清空县下拉框并发送请求获取对应的县区列表，最后填充到县下拉框中。

(1)准备标签

<!--准备select标签-->
<select id="province">
    <option>选择省</option>
</select>
<select id="city">
    <option>选择市</option>
</select>
<select id="county">
    <option>选择区县</option>
</select>

(2)用ajax给服务器发送请求,获得省的数据

  //发送请求
    $.get('/ajax/area',//服务器访问路径
        {pid: 0},//参数,根据数据库表可知省的pid等于0
        function (data) {//服务器返回数据后执行的函数

            for (var i = 0; i < data.length; i++) {
                //拿到每一个对象
                var obj = data[i];
                //给省添加option标签
                $("#province").append('<option value=' + obj.areaid + '>' + obj.areaname + '</option>');

            }
        }, "json");

(3)给省添加事件,每次选择后市都会出现对应的数据

    $("#province").change(function () {
        $("#city").empty();//如果没有清空,访问完后都会在下拉框中保留数据
        var pid = $("#province").val();//获取省value的值
		//给服务器发送请求,pid等于省的value的值
        $.get('/ajax/area',
            {pid: pid},
            function (data) {
                for (var i = 0; i < data.length; i++) {
                    //拿到每一个对象
                    var obj = data[i];
                    //给省添加option标签
                    $("#city").append('<option value=' + obj.areaid + '>' + obj.areaname + '</option>');
                }
            }, "json"
        )
    });

(4)给市添加事件,每次选择后县都会出现对应的数据

    $("#city").change(function () {
        $("#county").empty();
        var pid = $("#city").val();

        $.get('/ajax/area',
            {pid: pid},
            function (data) {
                for (var i = 0; i < data.length; i++) {
                    //拿到每一个对象
                    var obj = data[i];
                    //给省添加option标签
                    $("#county").append('<option value=' + obj.areaid + '>' + obj.areaname + '</option>');
                }
            }, "json"
        )
    });

(5)结果展示
在这里插入图片描述
(6)controller层的servlet展示

@WebServlet("/area")
public class AreaServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        String pid = request.getParameter("pid");
        //调用service
        AreaService areaService=new AreaServiceImpl();
        List<Area> areas = areaService.selectList(Integer.valueOf(pid));
        //响应数据
        response.setContentType("text/html;charset=utf-8");
        String str = JSON.toJSONString(areas);
        response.getWriter().write(str);



    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}