AJAX 实现省市县地名三级联动
2017-10-13 19:26
691 查看
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");
// 获取到当前地址的id
String id = request.getParameter("id");
// 如果为空，则说明是第一次请求，则显示所有的省
if (id == null || id.equals("")) {
// 调用Service层方法获取所有的省
List<Adress> provinces = adressService.findAllProvinces();
// 将数据绑定到request
request.setAttribute("list", provinces);
// 页面转发到adress.jsp
request.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();
@Override
public List<Adress> findAllProvinces() {
return adressDao.findAllProvinces();
}
@Override
public 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;
}
pu
c8f8
blic 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();
}
}
}
结果截图：
项目部署成功后，在游览器输入如下地址即可
本案例运用到三层架构（表现层，服务层、持久层）表现层调用服务层的方法，服务层调用持久层的方法，使用数据库为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");
// 获取到当前地址的id
String id = request.getParameter("id");
// 如果为空，则说明是第一次请求，则显示所有的省
if (id == null || id.equals("")) {
// 调用Service层方法获取所有的省
List<Adress> provinces = adressService.findAllProvinces();
// 将数据绑定到request
request.setAttribute("list", provinces);
// 页面转发到adress.jsp
request.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();
@Override
public List<Adress> findAllProvinces() {
return adressDao.findAllProvinces();
}
@Override
public 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;
}
pu
c8f8
blic 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();
}
}
}
结果截图：
项目部署成功后，在游览器输入如下地址即可
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX+JSON 实现省市县地名三级联动
- ajax 实现无刷新实现省市县(区)三级联动
- AJAX和WebService实现省市县三级联动
- PHP+Ajax三种方法实现省市县三级联动
- 移动端纯原生JS不依赖AJAX后台服务器实现省市县三级联动
- Ajax实现省市县三级联动
- Ajax实现省市县三级联动
- ajax实现无刷新省市县三级联动
- Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net
- Ajax实现省市县三级联动
- Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net
- AJAX省市县三级联动的实现
- AJAX和WebService实现省市县三级联动
- 用DropDownList实现Ajax无刷新省市三级联动中出现的错误
- Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新
- Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新
- asp.net(c#)用Ajax调用web 服务实现省市县三级联动
- 用php+mysql+json+js+ajax实现省市县三级联动
- 使用三层实现省市县三级联动（利用ajax实现无刷新效果）