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

来源：互联网发布：一般淘宝哪些假货多编辑：程序博客网时间：2024/04/30 12:09

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

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

address.sql

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);

数据库数据如下：

项目结构如图：

需要的包：

具体代码如下：

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"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><script type="text/javascript">/* 参数current表示当前操作的id,参数find表示将要查看的下一级id */function findAdress(current, find) {/* 获得当前选中的地址的value值 */var p = document.getElementById(current);var id = p.value;/* 如果当前选中的地址是省，则先将市和县的内容清空（只保留提示信息） */if (current === "province") {var ct = document.getElementById("city");ct.options.length = 1;/* 为了保留提示信息 */var co = document.getElementById("county");co.options.length = 1;/* 为了保留提示信息 */}/* 如果当前选中的地址是市，则先县的内容清空 （只保留提示信息）*/if (current === "city") {var co = document.getElementById("county");co.options.length = 1;/* 为了保留提示信息 */}/* 获得将要查看的地址（市或者县）*/var c = document.getElementById(find);/* 接下来的步骤为AJAX异步查询当前地址的下级地址（并将它们追加到下拉框中） *//* 步骤一：创建异步引擎对象 */var xhr = new XMLHttpRequest();//步骤一：打开引擎，method用于设置请求的方式：get或者post/* url设置请求的路径，async设置是同步操作还是异步操作，默认是ture(异步) */xhr.open("post", "adress.do");/* Post方式请求要设置请求头 */xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");/* 发送 */xhr.send("id=" + id);/* 步骤三：检测引擎的状态改变 */xhr.onreadystatechange = function() {/* 判断响应是否已经接收完成和判断是否正常响应 */if (xhr.readyState == 4 && xhr.status == 200) {/* 接收响应的字符串信息 *//* 得到的字符串格式 ：    3,深圳!5,广州!    */var result = xhr.responseText;/* 如果没有下级地址，则提示无数据 ，方法结束*/if (result === null || result === "") {var option = new Option("无数据", "无数据");c.add(option);return;}/* 如果有下级地址，则处理字符串，追加下级地址*/var sps = result.split("!");/* 用！分割字符串得到一个字符串数组（响应的数据以！分隔开下级地址的字符串） *//* 遍历数组，舍弃最后一个数组元素（最后一个元素为空）*//* 分割之后的字符串格式： 3,深圳   */for (var i = 0; i < sps.length - 1; i++) {/* 再次以,分割字符串 */var spss = sps[i].split(",");/* spss[1]为option的text,spss[0]为option的value */var option = new Option(spss[1], spss[0]);c.add(option);}}}}</script></head><body><h1>省市县三级联动</h1>省:<select name="province" id="province"onchange="findAdress('province','city')"><option>----请选择省----</option><c:forEach items="${list }" var="a"><option value="${a.id }">${a.name }</option></c:forEach></select> 市:<select name="province" id="city"onchange="findAdress('city','county')"><option>----请选择市----</option></select> 县:<select name="province" id="county"><option>----请选择县----</option></select></body></html>

表现层：
2、AdressServlet.java

//用注解配置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 {AdressService adressService = new AdressServiceImpl();/* Post请求中文乱码处理 */request.setCharacterEncoding("utf-8");// 响应中文乱码处理response.setContentType("text/html;charset=UTF-8");// 获取到当前地址的idString id = request.getParameter("id");// 如果为空，则说明是第一次请求，则显示所有的省if (id == null || id.equals("")) {// 调用Service层方法获取所有的省List<Adress> provinces = adressService.findAllProvinces();// 将数据绑定到requestrequest.setAttribute("list", provinces);// 页面转发到adress.jsprequest.getRequestDispatcher("adress.jsp").forward(request, response);} else {// 根据当前地址的id获取他的下级地址（当前地址的id也就是下级地址的parentid）List<Adress> citys = adressService.findCitys(Integer.parseInt(id));StringBuffer sb = new StringBuffer();// 将获得的他的所有下级地址拼接成字符串返回（每个地址以！分隔），只查询下级地址的id和名字for (Adress c : citys) {sb.append(c.getId() + "," + c.getName() + "!");}PrintWriter out = response.getWriter();out.write(sb.toString());System.out.println(sb.toString());out.flush();out.close();}}}

持久层：

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

public interface IAdressDAO {// 查寻所有的省public List<Adress> findAllProvinces();// 根据当前选中地址的id查询出他的下级地址public List<Adress> findCitys(Integer id);}

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

public class AdressDAOImpl implements IAdressDAO {public List<Adress> findAllProvinces() {List<Adress> list = null;Connection conn = null;PreparedStatement ps = null;ResultSet rs = null;try {list = new ArrayList<Adress>();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<Adress> findCitys(Integer id) {List<Adress> list = null;Connection conn = null;PreparedStatement ps = null;ResultSet rs = null;try {conn = DBUtils.getConn();list = new ArrayList<Adress>();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 （服务层接口定义方法）

public interface IAdressService {public List<Adress> findAllProvinces();public List<Adress> findCitys(Integer id);}

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

public class AdressServiceImpl implements IAdressService {private IAdressDAO adressDao = new AdressDAOImpl();@Overridepublic List<Adress> findAllProvinces() {return adressDao.findAllProvinces();}@Overridepublic List<Adress> findCitys(Integer id) {return adressDao.findCitys(id);}}

实体：

7、Adress.java

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 (数据库连接工具类)

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();}}}

结果截图：

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

阅读全文

0 0