Servlet-Web 省市区（县）三级联动代码与项目总结

1） 创建得省市区（县）数据库

可以下载我百度云盘中的省市区（县）数据 ,然后导入MysqL数据中

下载数据连接： http://pan.baidu.com/s/1qYqLdOK

2）然后搭建自己的项目（最好使用MVC模式搭建自己的项目架构）

1.在省市区这个项目中我是按照mvc设置的构架分层思想设置的

图 如下：

view层： 结合control层，显示前台页面

control层：业务模块流程控制，调用service层接口。

service层：业务操作实现类，调用dao层接口。

dao层： 数据业务处理，持久化操作

model层： pojo，OR maping，持久层 （放置实体类）

下面介绍一下我是怎样完成这个项目的和解析一下要点：

项目中主要运用了json、ajax、servlet、数据库连接等知识

a） 首先先把前端view层，即是前端页面写好，可用html或jsp都行，这里我是jsp

简单的界面如图：

b)分析一下数据库表中的对应关系

我的数据库中把所用数组都放在同一张表中了，根据对应的关系查找，在查找第一级省可根据parent_id=0查询（只需拿到name,id），然后在查找第二级和第三级均时可根据id查询。
图：

c)开始写实体类与dao层

根据前端的需求与对数据库的操作，只需要拿到name , parent_id , id 即可
所以实体类只需要定于这三个属性即可，代码如下：

package com.shenshi.model;/*封装一个实体类对象在程序中仅作为数据容器用来持久化存储数据用的*/public class Area {    //省市区的名字    private String name;    private int parent_id;    private int id;    public String getName() {        return name;    }    public void setName(String name) {        this.name = name;    }    public int getParent_id() {        return parent_id;    }    public void setParent_id(int parent_id) {        this.parent_id = parent_id;    }    public int getId() {        return id;    }    public void setId(int id) {        this.id = id;    }}

在dao层中，首先创建一个接口（interface），然后再创建一个类实现此接口中的方法；

接口好处：

1）接口是规范，使得代码看起来规范点，风格统一点。

2）接口可以告诉你一般作某件事情可以做哪些事情，这样符合面向对象的原则。

3）接口定义的对象不考虑具体实现，所有实现都是在实现子类里面完成

4）接口实现扩展功能啊 java类与类之间只能单继承 类与接口之间可以多实现啊

//dao层接口public interface AreaDao {    public List<Area> getAreaByParentno(int id);}

// 数据业务处理，持久化操作
public class AreaDaoImp implements AreaDao {

@Overridepublic List<Area> getAreaByParentno(int id) {    String sql=null;        if(id!=0){            sql="select * from city where "+"id!="+id + " and parent_id="+id;//市、县、区查询        }else        sql="select * from city where parent_id="+id;//省查询    Connection conn=JDBCUtil.getConnection();//获取JDBC工具类中的连接数据库的方法    PreparedStatement ps=null;    ResultSet rs=null;    List<Area> list=new ArrayList<Area>();    try {        ps=conn.prepareStatement(sql);//对sql语句进行预编译        rs=ps.executeQuery();        while(rs.next()){            Area area=new Area();            area.setName(rs.getString("name"));            area.setId(rs.getInt("id"));            list.add(area);        }    } catch (SQLException e) {        e.printStackTrace();    }finally{        JDBCUtil.close(conn, ps, rs);    }    return list;}

}

//JDBC工具类

public class JDBCUtil {     private static Properties pro=new Properties();     /*静态代码块：有些代码必须在项目启动的时候就执行，      * 这种代码是主动执行的(当类被载入时，静态代码块被执行，且只被执行一次，      * 静态块常用来执行类属性的初始化)         静态方法：需要在项目启动的时候就初始化,在不创建对象的情况下，               这种代码是被动执行的（静态方法在类加载的时候就已经加载 可以用类名直接调用）。               两者的区别就是:静态代码块是自动执行的;        静态方法是被调用的时候才执行的.     */     static{         try {    pro.load(new FileReader(     /*load ( InputStream inStream)，从输入流中读取属性列表（键和元素对）。             * 通过对指定的文件（比如说上面的 test.properties 文件）             * 进行装载来获取该文件中的所有键 - 值对。             以供 getProperty ( String key) 来搜索。*/                    JDBCUtil.class.getClassLoader().getResource("config.properties").getPath()));//获取当前类路劲下的config.properties文件的路径         } catch (FileNotFoundException e) {             e.printStackTrace();         } catch (IOException e) {             e.printStackTrace();         }        }     //创建数据库连接    public static Connection getConnection() {            Connection conn=null;            try {                // getProperty ( String key) 根据健来搜索相对应的值                //class.forName()是运用反射的原理创建对象                ////加载Msql驱动（com.mysql.jdbc.Driver）            Class.forName(pro.getProperty("Drivername"));                conn=DriverManager.getConnection(                        pro.getProperty("url"),                         pro.getProperty("username"),                         pro.getProperty("password"));            } catch (Exception e) {                e.printStackTrace();            }                   return conn;                }        //统一关闭释放资源  注意顺序为ResultSet-Statement-Connection（必须最后关闭）        public static void close(Connection conn,Statement state,ResultSet rs) {            try {                if (rs!=null) {//严谨的做法判断对象是否为空                    rs.close();                }            } catch (SQLException e) {                e.printStackTrace();            }            try {                if (state!=null) {                    state.close();                }            } catch (SQLException e) {                e.printStackTrace();            }            try {                if (conn!=null) {                    conn.close();                }            } catch (SQLException e) {                e.printStackTrace();            }        }}

config.properties文件，主要用于配置数据操作的一些信息

##代码Drivername=com.mysql.jdbc.Driver    ##mysql驱动url=jdbc:mysql://127.0.0.1:3306/ctiy ##mysql连接（mysql:+本地Ip+数据库端口号+数据库名）username=root       ##数据库用户账号password=123456     ##数据库密码

d)*注意记得导入jar 包

（mysql-connector-java-5.1.32.jar—-数据连接）
（fastjson-1.2.122.jar—-把数据转为操作json格式（下面会说的））

e)service层代码–在这个项目中比较简单

（如果涉及到事务时，我一般会放在service层调用）

//业务操作实现类，调用dao层接口public class AreaServiceImp implements AreaService {    private AreaDao areacity=new AreaDaoImp();    @Override    public List<Area> getAreaByParentno(int id) {        List<Area> list=new ArrayList<Area>();        return list=areacity.getAreaByParentno(id);    }}

f)service层：业务操作实现类，调用dao层接口。

以及接收view层传过来的数据进行处理

*在这里首先先了解一下这两个对象分别是request，response

web服务器收到客户端的HTTP请求，会针对每一次请求分别创建一个用于代表请求的request对象

和代表响应的response对象用于动态响应客户端请示，控制发送给用户的信息，并将动态生成响应

总结两点：
1.要得到客户机提交过来的数据，只需要找request对象就行了。

2、要向客户机输出数据，只需要找response对象就行了。

代码：

@WebServlet("/getCity")public class GetArea extends HttpServlet {    private AreaService areaService = new AreaServiceImp();    private static final long serialVersionUID = 1L;    public GetArea() {        super();    }    protected void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        //getParameter是用来获取URL中的参数的        String flag = request.getParameter("flag");        String id = request.getParameter("id");        if (flag == null && id == null) {            province(request, response);        } else {            if (flag.equals("city")) {                city(request, response, Integer.valueOf(id));                //Integer.valueOf(id)将String强转为int类型            } else {                if(flag.equals("area")){                    area(request, response, Integer.valueOf(id));                }            }        }    }    protected void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doGet(request, response);    }    // 一级查询---输出（name,id）    public void province(HttpServletRequest request, HttpServletResponse response) {        List<Area> list = areaService.getAreaByParentno(0);        //设置以json格式响应，并设置编码类型防止数据传递乱码        response.setContentType("application/json;charset=utf-8");        try {            System.out.println(JSONObject.toJSONString(list));            //响应信息通过out对象输出到网页上，当响应结束时它自动被关闭，与jsp页面无关，无需刷新页面            //write()：仅支持输出字符类型数据，字符、字符数组、字符串等            response.getWriter().write(JSONObject.toJSONString(list));        } catch (IOException e) {            e.printStackTrace();        }    }    // 二级查询---输出（name,id）---根据id查询    public void city(HttpServletRequest request, HttpServletResponse response, int id) {        //List<Area> list = areaService.getAreaByParentno("code",0, number);        List<Area> list = areaService.getAreaByParentno(id);        //设置以json格式响应，并设置编码类型防止数据传递乱码        response.setContentType("application/json;charset=utf-8");        try {            response.getWriter().write(JSONObject.toJSONString(list));        } catch (IOException e) {            e.printStackTrace();        }    }    // 三级查询----输出（name,id）---根据id查询    public void area(HttpServletRequest request, HttpServletResponse response, int id) {        List<Area> list = areaService.getAreaByParentno(id);        response.setContentType("application/json;charset=utf-8");        try {            response.getWriter().write(JSONObject.toJSONString(list));        } catch (IOException e) {            e.printStackTrace();        }    }

g)view层（主要使用ajax、json、jq知识）

 <%    String path=request.getContextPath();    out.println(path);    //request.getContextPath()可以返回当前项目的名字，我的：/shengshiqu    request.getServletContext().setAttribute("path", path);%> <!-- 这个语句是用来拼装当前网页的相对路径的。 --><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>地址选择</title></head><body><div style="margin: 100px auto; border: 2px soild">        <label>省：</label>        <select id="province" style="width: 120px;height: 30px;border: 1px solid red; border-radius: 4px;">        </select>        <label>市：</label>        <select id="city" style="width: 120px;height: 30px;border: 1px solid red; border-radius: 4px;""></select>        <label>区（县）：</label>        <select id="area" style="width: 120px;height: 30px;border: 1px solid red; border-radius: 4px;""></select></div><script type="text/javascript" src="${path }/js/jquery-2.1.0.js"></script></body><script type="text/javascript">$(document).ready(function () {    getprovince();//网页加载完成时自动执行 此方法      $("#province").change(function () {//表示id="province"的标签中的值改变时调用此方法        getcity($(this).val());    });    $("#city").change(function () {//以上同理        getarea($(this).val());    });     function getprovince(){//使用ajax获取后台返回的数据        $.ajax(        {            type:"post",//规定请求的类型（GET 或 POST）。            url:"${path}/getCity",//规定发送请求的 URL。默认是当前页面。            async:true, //表示请求是否异步处理。默认是 true。            dataType:"json",//默认类型也为json格式            success: function (data) {//data:代表返回的数据为json格式的数组        //  [{"id":1,"name":"北京市","parent_id":0},        //  {"id":2,"name":"天津市","parent_id":0},        //  {"id":3,"name":"河北省","parent_id":0},        //  {"id":4,"name":"山西省","parent_id":0},.......}                //alert(data)                $.each(data,function(n,item){                    var option=$("<option></option>");//设置option标签                    option.val(item.id);//设置option标签中的value值为数据库表中id字段中的值                    option.text(item.name);//设置option标签中的text值为数据库表中name字段中的值                    option.appendTo($("#province"));//将 option添加到id为province标签的结尾（仍然在内部                });                //alert($("#province").val());                getcity($("#province").val());//调用getcity方法，并插入参数$("#province").val()(即：id字段中的值)           }        }        );    }       function getcity(id){            $("#city").empty();//清空之前的数据            $.ajax({                type:"get",                url:"${path }/getCity?id="+id,                data:{                    flag:"city"//向服务器发送flag：作为标志字段                },                success:function(data){                    $.each(data,function(n,item){                -----------                -----                ------                });                 //alert($("#city").val());                 getarea($("#city").val());                }            });    }      function getarea(id){        $("#area").empty();        $.ajax( { type:"get",                    url:"${path }/getCity?id="+parseInt(id),//将数据转成int 类型                    data:{                        flag:"area"                    },                    success: function (data) {                        ---------                        ------                        -----                    }                }        );    } });</script></html>

最后效果：

想要完整版源码的朋友可以点击下载
省市联动源码连接：http://pan.baidu.com/s/1kUDFOzl