AJAX+JSON 实现省市县地名三级联动

AJAX+JSON  实现省市县地名三级联动

本案例运用到三层架构（表现层，服务层、持久层）表现层调用服务层的方法，服务层调用持久层的方法，使用数据库为Oracle数据库，在数据库中创建一张名为address的数据表。前前和后台数据传输使用json方式（引入第三方工具Jackson）具体字段和插入的数据如下

address.sql

 "font-family:Microsoft YaHei;font-size:18px;">CREATE TABLE address (
   id       NUMBER(5), --地名编码（唯一）
   name     VARCHAR2(45), --名字
   grade    NUMBER(1), --等级（0代表省，2代表市，3代表县）
   parentid NUMBER(5), --父级编码,默认为0（0是顶级没有父类）
   CONSTRAINT pk_address_id PRIMARY KEY (id)

 );

 INSERT INTO address (id, name, grade, parentid) VALUES (1,'北京',0,0);
 INSERT INTO address (id, name, grade, parentid) VALUES (2, '广东', 0, 0);
 INSERT INTO address (id, name, grade, parentid) VALUES (3, '深圳', 0, 2);
 INSERT INTO address (id, name, grade, parentid) VALUES (4, '福田区', 0, 3);
 INSERT INTO address (id, name, grade, parentid) VALUES (5, '广州', 0, 2);
 INSERT INTO address (id, name, grade, parentid) VALUES (6, '四川', 0, 0);

数据库数据如下：

创建一个js文件夹存放js文件（需要引入json.js）：

项目结构如图：

需要的包：

具体代码如下：

1、adress.jsp（显示界面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>









	
省市县三级联动
	省:
	
		----请选择省----
		
			${a.name }
		
	 市:
	
		----请选择市----

	 县:
	
		----请选择县----

	

表现层：
2、AdressServlet.java

package cn.sz.hcq.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.codehaus.jackson.map.ObjectMapper;

import cn.sz.hcq.pojo.Adress;
import cn.sz.hcq.service.IAdressService;
import cn.sz.hcq.service.impl.AdressServiceImpl;

//用注解配置servlet
@WebServlet("/adress.do")
public class AdressServlet extends HttpServlet {

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

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

		IAdressService adressService = new AdressServiceImpl();
		/* Post请求中文乱码处理 */
		request.setCharacterEncoding("utf-8");
		// 响应中文乱码处理
		response.setContentType("text/html;charset=UTF-8");
		// 获取到当前地址的id
		String id = request.getParameter("id");
		// 如果为空，则说明是第一次请求，则显示所有的省
		if (id == null || id.equals("")) {
			// 调用Service层方法获取所有的省
			List provinces = adressService.findAllProvinces();
			// 将数据绑定到request
			request.setAttribute("list", provinces);
			// 页面转发到adress.jsp
			request.getRequestDispatcher("adress.jsp").forward(request, response);
		} else {
			// 根据当前地址的id获取他的下级地址（当前地址的id也就是下级地址的parentid）
			List citys = adressService.findCitys(Integer.parseInt(id));
			
			// 创建实现转换的对象
			ObjectMapper mapper = new ObjectMapper();
			// 将list集合转换为json字符串
			String str = mapper.writeValueAsString(citys);
			PrintWriter out = response.getWriter();
			System.out.println(str);
			out.flush();
			out.close();
		}
	}
}

持久层：

3、IAdressDAO.java （对应操作数据库的方法）

 "font-family:Microsoft YaHei;font-size:18px;">public interface IAdressDAO {
     // 查寻所有的省
     public List findAllProvinces();

     // 根据当前选中地址的id查询出他的下级地址
     public List findCitys(Integer id);

 }

4、AdressDAOImpl.java (具体实现操作数据库的方法)

 "font-family:Microsoft YaHei;font-size:18px;">public class AdressDAOImpl implements IAdressDAO {

     public List findAllProvinces() {
         List list = null;
         Connection conn = null;
         PreparedStatement ps = null;
         ResultSet rs = null;
         try {
             list = new ArrayList();
             conn = DBUtils.getConn();
             String sql = "select id,name,grade,parentid from address where grade=?";
             ps = conn.prepareStatement(sql);
             ps.setInt(1, 0);
             rs = ps.executeQuery();
             while (rs.next()) {
                 Adress a = new Adress();
                 a.setId(rs.getInt(1));
                 a.setName(rs.getString(2));
                 a.setGrade(rs.getInt(3));
                 a.setParentid(rs.getInt(4));
                 list.add(a);
             }
         } catch (SQLException e) {
             e.printStackTrace();
         } finally {
             DBUtils.close(conn, ps, rs);
         }
         return list;
     }

     public List findCitys(Integer id) {
         List list = null;
         Connection conn = null;
         PreparedStatement ps = null;
         ResultSet rs = null;
         try {
             conn = DBUtils.getConn();
             list = new ArrayList();
             String sql = "select id,name,grade,parentid from address where parentid=?";
             ps = conn.prepareStatement(sql);
             ps.setInt(1, id);
             rs = ps.executeQuery();
             while (rs.next()) {
                 Adress a = new Adress();
                 a.setId(rs.getInt(1));
                 a.setName(rs.getString(2));
                 a.setGrade(rs.getInt(3));
                 a.setParentid(rs.getInt(4));
                 list.add(a);
             }
         } catch (SQLException e) {
             e.printStackTrace();
         } finally {
             DBUtils.close(conn, ps, rs);
         }
         return list;
     }}

服务层：

5、IAdressService.java （服务层接口 定义方法）

 "font-family:Microsoft YaHei;font-size:18px;">public interface IAdressService {
     public List findAllProvinces();

     public List findCitys(Integer id);
 }

6、AdressServiceImpl.java  (服务层接口 定义方法实现类)

 "font-family:Microsoft YaHei;font-size:18px;">public class AdressServiceImpl implements IAdressService {
     private IAdressDAO adressDao = new AdressDAOImpl();

     @Override
     public List findAllProvinces() {
         return adressDao.findAllProvinces();
     }

     @Override
     public List findCitys(Integer id) {
         return adressDao.findCitys(id);
     }

 }

实体：

7、Adress.java

 "font-family:Microsoft YaHei;font-size:18px;">
 public class Adress implements Serializable {
     private Integer id;
     private String name;
     private Integer grade;
     private Integer parentid;


     public Adress() {
     }


     public Adress(Integer id, String name, Integer grade, Integer parentid) {
         this.id = id;
         this.name = name;
         this.grade = grade;
         this.parentid = parentid;
     }


     public Integer getId() {
         return id;
     }


     public void setId(Integer id) {
         this.id = id;
     }


     public String getName() {
         return name;
     }


     public void setName(String name) {
         this.name = name;
     }


     public Integer getGrade() {
         return grade;
     }


     public void setGrade(Integer grade) {
         this.grade = grade;
     }


     public Integer getParentid() {
         return parentid;
     }


     public void setParentid(Integer parentid) {
         this.parentid = parentid;
     }

 }

数据库连接：

8、DBUtils.java (数据库连接工具类)

 "font-family:Microsoft YaHei;font-size:18px;">public class DBUtils {
     public static Connection getConn() {
         Connection conn = null;
         try {
             // 加载数据库驱动
             DriverManager.registerDriver(new OracleDriver());
             // 获得连接
             conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:yztc", "scott", "tiger");
         } catch (SQLException e) {
             e.printStackTrace();
         }
         return conn;
     }

     public static void close(Connection conn, PreparedStatement ps, ResultSet rs) {
         try {
             if (rs != null)
                 rs.close();
             if (ps != null)
                 ps.close();
             if (conn != null)
                 conn.close();
         } catch (SQLException e) {
             e.printStackTrace();
         }
     }
 }

结果截图：

项目部署成功后，在游览器输入如下地址即可