web异步实现三级联动效果，查省份

首先，使用mysql建立三张表分别是省份，城市，区。如下图

---

 

 

 相对应的也要建三个实体类，和表一一对应上，后面Ajax会用上。

---

下面是jsp代码

---

                <div><h2>请填写您的收货地址</h2></div>
                <select id="province"> </select>
                <select id="city"> </select>
                <select id="district"> </select>





<script src="js/jquery.js"></script>





<script>

  $(function () {
            // select();
            // select1();
            // select2();
            getAll_Province();
        });


        function  getAll_Province(){
            $.getJSON("../getAll","",function(data){
                for(var i=0;i<data.length;i++){
                    var str = "<option value='"+data[i].pid+"'>"+data[i].pname+"</option>";
                    $('#province').append(str);
                }
            });

            $('#province').change(function(){
                $('#city').empty();
                var id = $(this).val();
                $.getJSON("../findByPid","id="+id,function(data){
                    for(var i=0;i<data.length;i++){
                        var str = "<option value='"+data[i].cid+"'>"+data[i].cname+"</option>";
                        $('#city').append(str);
                    }
                });
            });

            $('#city').change(function(){
                $('#district').empty();
                var id = $(this).val();
                $.getJSON("../FindByPid_District","id="+id,function(data){
                    for(var i=0;i<data.length;i++){
                        var str = "<option value='"+data[i].did+"'>"+data[i].dname+"</option>";
                        $('#district').append(str);
                    }
                });
            });

        }



</script>

---

实体类编辑，如此三个，我这里只写了一个，怕文章太长了

public class City {
    private int cid;//城市id
    private String cname;//城市名称
    private int pid;//对应的区id


    public City() {
    }

    public City(int cid, String cname, int pid) {
        this.cid = cid;
        this.cname = cname;
        this.pid = pid;
    }

    /**
     * 获取
     * @return cid
     */
    public int getCid() {
        return cid;
    }

    /**
     * 设置
     * @param cid
     */
    public void setCid(int cid) {
        this.cid = cid;
    }

    /**
     * 获取
     * @return cname
     */
    public String getCname() {
        return cname;
    }

    /**
     * 设置
     * @param cname
     */
    public void setCname(String cname) {
        this.cname = cname;
    }

    /**
     * 获取
     * @return pid
     */
    public int getPid() {
        return pid;
    }

    /**
     * 设置
     * @param pid
     */
    public void setPid(int pid) {
        this.pid = pid;
    }

    public String toString() {
        return "City{cid = " + cid + ", cname = " + cname + ", pid = " + pid + "}";
    }

下面是dao层连接数据库查询代码这里大家可以使用自己的查询语句，我平时用的最多的封装类

---

下面是dao层的接口，

public interface UserDao {
    
    /*
查询所有省份
 */
    public List<Province> getAll();

    /*
    根据传入的省份id  查询该省份下有哪些市区
     */
    public List<City> findByPid(int pid);//查询市区

    public List<District> findByPid_District(int cid);//查询区



}

下面是dao层实现类

---

public class UserDaoimpl extends BaseDao implements UserDao {

 @Override
public List<City> findByPid(int pid) {
        Connection conn = DataBaseUtil.getConnection();
        ArrayList<City> list = new ArrayList<>();
        ResultSet rs = null;
        try {
            PreparedStatement ps = conn.prepareStatement("select * from city where pid=?");
            ps.setInt(1,pid);
            rs = ps.executeQuery();
            while(rs.next()){
                City c = new City(rs.getInt("cid"),rs.getString("cname"),rs.getInt("pid"));
                list.add(c);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DataBaseUtil.closeAll(conn,null,rs);
        }
        return list;
    }

---

下面是servlet代码

---

@WebServlet("/findByPid")
public class FindByPid extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");
        PrintWriter out = resp.getWriter();
        //*******************************************
        int pid = Integer.parseInt(req.getParameter("id"));
        UserService ps = new UserServiceimpl();
        List<City> list = ps.findByPid(pid);
        String str = JSON.toJSONString(list);
        out.print(str);
    }
}

小伙伴们别忘了添加Json的jre包到lib层，到这里就实现三级联动了