省市联动实现

数据库设计

CREATE TABLE tab_province(
   pid INT PRIMARY KEY AUTO_INCREMENT,
   pname VARCHAR(11) UNIQUE
);
CREATE TABLE tab_city(
   cid INT PRIMARY KEY AUTO_INCREMENT,
   cname VARCHAR(11) UNIQUE,
   pid INT,
   CONSTRAINT fk_111 FOREIGN KEY(pid) REFERENCES tab_province(pid)
);
INSERT INTO tab_province VALUES(1,"河南");
INSERT INTO tab_province VALUES(2,"北京");
INSERT INTO tab_province VALUES(3,"天津");
INSERT INTO tab_province VALUES(4,"云南");
INSERT INTO tab_province VALUES(5,"河北");
INSERT INTO tab_city VALUES(1000,"郑州",1),(NULL,"汝州",1),(NULL,"濮阳",1),(NULL,"洛阳",1),(NULL,"信阳",1),(NULL,"南阳",1);
INSERT INTO tab_city VALUES(2000,"朝阳区",2),(NULL,"海淀区",2),(NULL,"昌平区",2),(NULL,"通州区",2),(NULL,"顺义区",2),(NULL,"丰台区",2);
INSERT INTO tab_city VALUES(3000,"塘沽区",3),(NULL,"东丽区",3),(NULL,"西青区",3),(NULL,"静海区",3),(NULL,"红桥区",3),(NULL,"武清区",3);
INSERT INTO tab_city VALUES(4000,"昆明",4),(NULL,"大理",4),(NULL,"丽江",4),(NULL,"西双版纳",4),(NULL,"香格里拉",4),(NULL,"玉溪",4);
INSERT INTO tab_city VALUES(5000,"石家庄",5),(NULL,"廊坊",5),(NULL,"白洋淀",5),(NULL,"衡水",5),(NULL,"保定",5),(NULL,"唐山",5);

实体类

public class City  implements Serializable {
	private Integer cid;
	private String  cname;
	private Integer pid;
}
public class Province  implements Serializable {
    private Integer pid;
    private String pname;
}

jar

dao

public class CityDao {

    /**
     * 根据省份 id获取该城市
     *
     * @param pid 省份id
     * @return
     */
    public List<City> getAllByProvinceId(int pid) {
        try (Connection connection = JDBCUtils.getConnection()) {
            QueryRunner runner = new QueryRunner();
            BeanListHandler<City> beanListHandler = new BeanListHandler<>(City.class);
            String sql = "select * from tab_city where pid=?";
            return runner.query(connection, sql, beanListHandler, pid);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }
}

public class ProvinceDao {
    /**
     * 获取所有城市
     *
     * @return
     */
    public List<Province> getAll() {
        try (Connection connection = JDBCUtils.getConnection()) {
            QueryRunner runner = new QueryRunner();
            String sql = "select * from tab_province";
            BeanListHandler<Province> beanListHandler = new BeanListHandler<>(Province.class);
            return runner.query(connection, sql, beanListHandler);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 根据 省名获取省
     *
     * @param pname
     * @return
     */
    public Province getOneByName(String pname) {
        try (Connection connection = JDBCUtils.getConnection()) {
            QueryRunner runner = new QueryRunner();
            String sql = "select * from tab_province where pname=?";
            BeanHandler<Province> beanHandler = new BeanHandler<>(Province.class);
            return runner.query(connection, sql, beanHandler, pname);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }
}

servlet

• 如果响应给浏览器数据需要设置响应头，否则乱码

@WebServlet("/city/QueryProvinceName")
public class CityQueryOneServlet extends HttpServlet {
    private CityDao dao = new CityDao();
    private ProvinceDao pdao = new ProvinceDao();

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        String pname = request.getParameter("pname");
        Province province = pdao.getOneByName(pname);
        List<City> list = dao.getAllByProvinceId(province.getPid());
        String json = JSON.toJSONString(list);
        response.getWriter().print(json);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

@WebServlet("/province/getAll")
public class ProvinceGetAllServlet extends HttpServlet {
    private ProvinceDao dao = new ProvinceDao();

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       //这里如果不设置响应头会出现乱码！！！
        response.setContentType("text/html;charset=utf-8");
        List<Province> list = dao.getAll();
        String json = JSON.toJSONString(list);
        System.out.println(json);
        response.getWriter().print(json);
    }
}

页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.min.js"></script>
</head>
<body>
请选择你的地址：<select name="province">
    <option>请选择省份</option>
</select>
<select name="city">
    <option>请选择城市</option>
</select><br/>
</body>
<script>
    //页面打开 通过ajax获取所有的身份 并拼凑 option，添加第一个 select中
    $(function () {
        let province = $("select[name='province']"); //获取第一个下拉框
        let city = $("select[name='city']"); //获取第二个下拉框

        $.ajax({
            url: "${pageContext.request.contextPath}/province/getAll",
            dataType: "json",
            type: "get",
            success: function (data) {
                data.forEach(e => {
                    province.append($("<option value=" + e.pname + ">" + e.pname + "</option>"));
                })
            },
            error: function (data) {
                console.log("error" + data)
            }
        });
        //给 select name='province' 添加change事件
        province.bind("change", function () {
            if (province.val()) {
                //获取省份的名字
                var pname = province.val();
                console.log("pname", pname)
                //remove() 方法删除被选元素及其子元素。
                //empty() 方法删除被选元素的子元素。
                $("select[name='city'] option:gt(0)").remove();
                //通过 Ajax获取当前省份对应的城市 并写入第二个select中
                $.ajax({
                    url: "${pageContext.request.contextPath}/city/QueryProvinceName",
                    dataType: "json",
                    type: "post",
                    data: {"pname": pname},
                    success: function (data) {
                        console.log("succ", data)
                        data.forEach(e => {
                            city.append($("<option value=" + e.cname + ">" + e.cname + "</option>"))
                        });
                    }
                })
            }
        })
    })
</script>
</html>