使用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);
    }
}