Ajax 案例之三级联动
时间:2022-05-15
本文章向大家介绍Ajax 案例之三级联动，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
每次在博客园网站写博客，格式真的好难搞，还望好心人告知更好的编辑工具。接下来进入正题：三级联动（其效果演示可看我的博文 Ajax 学习总结 末尾）。
1. 数据表设计（Oracle）
- 新建数据表 Employees（员工信息）、Locations（城市信息）、Departments（部门信息），其中 Departments 表的外键为 locations 表的 location_id ，Employees 表的外键为 Departments 表Department_id
2.DAO 层设计（c3p0 数据库连接池、JDBCUtils） a. 获取释放数据库连接的工具类：JDBCTools
package com.javaweb.userajax.serlet.list.show.tools;
import com.mchange.v2.c3p0.ComboPooledDataSource;
import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;
/**
* Created by shkstart on 2017/12/05.
*/
public class JDBCTools {
private static DataSource dataSource;
static {
dataSource = new ComboPooledDataSource("listShow");
}
public static Connection getConnection() {
Connection connection = null;
try {
connection = dataSource.getConnection();
} catch (SQLException e) {
e.printStackTrace();
}
return connection;
}
public void releaseConnection(Connection connection) {
try {
connection.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
b. 获取某张数据表的所有数据以及根据限定的查询条件获取部分值的 DAO 类：DAO
package com.javaweb.userajax.serlet.list.show.dao;
import com.javaweb.userajax.serlet.list.show.tools.JDBCTools;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import java.lang.reflect.ParameterizedType;
import java.lang.reflect.Type;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;
/**
* Created by shkstart on 2017/12/05.
*/
public class DAO<T> {
private QueryRunner queryRunner;
private Class<T> type;
public DAO() {
queryRunner = new QueryRunner();
Type superClass = getClass().getGenericSuperclass();
if (superClass instanceof ParameterizedType) {
ParameterizedType parameterizedType = (ParameterizedType) superClass;
Type[] args = parameterizedType.getActualTypeArguments();
if (args != null && args.length > 0) {
if (args[0] instanceof Class) {
type = (Class<T>) args[0];
}
}
}
}
public List<T> getAll(String sql) {
Connection connection = JDBCTools.getConnection();
List<T> list = null;
try {
list = queryRunner.query(connection, sql, new BeanListHandler<T>(type));
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
public List<T> getList(String sql, Object ... args) {
Connection connection = JDBCTools.getConnection();
List<T> list = null;
try {
list = queryRunner.query(connection, sql, new BeanListHandler<T>(type), args);
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
public T getValue(String sql, Object ... args) {
Connection connection = JDBCTools.getConnection();
T entity = null;
try {
entity = queryRunner.query(connection, sql, new BeanHandler<T>(type), args);
} catch (SQLException e) {
e.printStackTrace();
}
return entity;
}
}
c. 根据案例需求定义数据表对应的 dao 接口
DepartmentsDao:
package com.javaweb.userajax.serlet.list.show.dao;
import com.javaweb.userajax.serlet.list.show.domain.Departments;
import java.util.List;
/**
* Created by shkstart on 2017/12/06.
*/
public interface DepartmentsDao {
List<Departments> getAll(Integer locationId);
}
EmployeesDao:
package com.javaweb.userajax.serlet.list.show.dao;
import com.javaweb.userajax.serlet.list.show.domain.Employees;
import java.util.List;
/**
* Created by shkstart on 2017/12/06.
*/
public interface EmployeesDao {
List<Employees> getAll(Integer departmentId);
Employees getEmp(Integer employeeId);
}
LocationsDao:
package com.javaweb.userajax.serlet.list.show.dao;
import com.javaweb.userajax.serlet.list.show.domain.Locations;
import java.util.List;
/**
* Created by shkstart on 2017/12/06.
*/
public interface LocationsDao {
List<Locations> getAll();
}
d. 根据数据表编写对应的 domain 类
Departments：
package com.javaweb.userajax.serlet.list.show.domain;
/**
* Created by shkstart on 2017/12/06.
*/
public class Departments {
private Integer departmentId;
private String departmentName;
private Integer locationId;
public Integer getDepartmentId() {
return departmentId;
}
public void setDepartmentId(Integer departmentId) {
this.departmentId = departmentId;
}
public String getDepartmentName() {
return departmentName;
}
public void setDepartmentName(String departmentName) {
this.departmentName = departmentName;
}
public Integer getLocationId() {
return locationId;
}
public void setLocationId(Integer locationId) {
this.locationId = locationId;
}
public Departments(){
}
@Override
public String toString() {
return "Departments{" +
"departmentId=" + departmentId +
", departmentName='" + departmentName + ''' +
", locationId=" + locationId +
'}';
}
}
Employees：
package com.javaweb.userajax.serlet.list.show.domain;
/**
* Created by shkstart on 2017/12/06.
*/
public class Employees {
private Integer employeeId;
private Integer departmentId;
private String lastName;
private String email;
@Override
public String toString() {
return "Employees{" +
"employeeId=" + employeeId +
", departmentId=" + departmentId +
", lastName='" + lastName + ''' +
", email='" + email + ''' +
'}';
}
public Integer getDepartmentId() {
return departmentId;
}
public void setDepartmentId(Integer departmentId) {
this.departmentId = departmentId;
}
public Integer getEmployeeId() {
return employeeId;
}
public void setEmployeeId(Integer employeeId) {
this.employeeId = employeeId;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public Employees(){
}
}
Locations：
package com.javaweb.userajax.serlet.list.show.domain;
/**
* Created by shkstart on 2017/12/06.
*/
public class Locations {
private Integer locationId;
private String city;
public Integer getLocationId() {
return locationId;
}
public void setLocationId(Integer locationId) {
this.locationId = locationId;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public Locations() {
}
@Override
public String toString() {
return "Locations{" +
"locationId=" + locationId +
", city='" + city + ''' +
'}';
}
}
e. 根据 DAO 类以及 domain类实现数据表对应的 dao 接口
DepartmentsImpl：
package com.javaweb.userajax.serlet.list.show.daoimpl;
import com.javaweb.userajax.serlet.list.show.dao.DAO;
import com.javaweb.userajax.serlet.list.show.dao.DepartmentsDao;
import com.javaweb.userajax.serlet.list.show.domain.Departments;
import java.util.List;
/**
* Created by shkstart on 2017/12/06.
*/
public class DepartmentsImpl extends DAO<Departments> implements DepartmentsDao {
@Override
public List<Departments> getAll(Integer locationId) {
String sql = "SELECT department_id departmentId, department_name departmentName, location_id locationId FROM departments WHERE location_id=?";
System.out.println(sql);
List<Departments> departmentsList = getList(sql, locationId);
return departmentsList;
}
}
EmployeesImpl:
package com.javaweb.userajax.serlet.list.show.daoimpl;
import com.javaweb.userajax.serlet.list.show.dao.DAO;
import com.javaweb.userajax.serlet.list.show.dao.EmployeesDao;
import com.javaweb.userajax.serlet.list.show.domain.Employees;
import java.util.List;
/**
* Created by shkstart on 2017/12/06.
*/
public class EmployessDaoImpl extends DAO<Employees> implements EmployeesDao {
@Override
public List<Employees> getAll(Integer departmentId) {
String sql = "SELECT employee_id employeeId, last_name lastName FROM employees WHERE department_id=?";
System.out.println(sql);
List<Employees> employeesList = getList(sql, departmentId);
return employeesList;
}
@Override
public Employees getEmp(Integer employeeId) {
String sql = "SELECT employee_id employeeId, department_id departmentId, last_name lastName, email FROM employees WHERE employee_id=?";
Employees employees = getValue(sql, employeeId);
return employees;
}
}
LocationsImpl:
package com.javaweb.userajax.serlet.list.show.daoimpl;
import com.javaweb.userajax.serlet.list.show.dao.DAO;
import com.javaweb.userajax.serlet.list.show.dao.LocationsDao;
import com.javaweb.userajax.serlet.list.show.domain.Locations;
import java.util.List;
/**
* Created by shkstart on 2017/12/06.
*/
public class LocationsDaoImpl extends DAO<Locations> implements LocationsDao {
@Override
public List<Locations> getAll() {
String sql = "SELECT location_id locationId, city FROM locations";
List<Locations> locationsList = getAll(sql);
return locationsList;
}
}
JSP 页面实现
a. 我们先需要从 servlet 转发到 JSP 页面，将所有的 locations 信息封装在 request 中传回 jsp 页面在页面初始化的时候将所有 locations 信息显示
index.jsp（案例所访问的页面，此页面直接跳转到 servlet，在 Servlet 中获取 location 信息后转发会显示页面）
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>ForwardPage</title>
<body>
<h3></h3>
<jsp:forward page="getCity.do"/>
</body>
</html>
getCity 方法（servlet 中利用反射处理多个请求，前面的博文已经讲述过，此方法将 location 信息封装到 request 中然后转发到 selectList.jsp 页面）
protected void getCity(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
LocationsDao locationsDao = new LocationsDaoImpl();
List<Locations> locationsList = locationsDao.getAll();
request.setAttribute("locations", locationsList);
request.getRequestDispatcher("/selectList/selectList.jsp").forward(request, response);
}
selectList.jsp （将转发回页面的 locations 信息显示）
<%--
Created by IntelliJ IDEA.
User: yin'zhao
Date: 2017/12/04
Time: 21:37
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>ShowInfoPage</title>
</head>
<body>
<spac>City: </spac>
<select name="citySelect" id="city">
<option value="choose">请选择</option>
<c:forEach items="${requestScope.locations}" var="location">
<option value="${location.locationId}">${location.city}</option>
</c:forEach>
</select>
<span> </span>
<span>Department: </span>
<select name="departmentSelect" id="department">
<option value="choose">请选择</option>
</select>
<span> </span>
<span>Employee: </span>
<select name="employeeSelect" id="employee">
<option value="choose">请选择</option>
</select>
<table cellspacing="0" border="1" cellpadding="10" id="table">
<tr>
<th>employeeId</th>
<th>lastName</th>
<th>email</th>
</tr>
<tr>
<td id="employeeId"></td>
<td id="lastName"></td>
<td id="email"></td>
</tr>
</table>
</body>
</html>
b. 为下拉框添加 change 事件，每当 locations 改变后根据 location_id 获取departments 信息，并将其显示在对应的下拉框中（信息的显示利用 Ajax，若所选择 location 没有departments 则提示对应的消息）
selectList.jsp （处理 Ajax 请求部分）
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#city").change(function () {
// 每次选择都将除了第一个的所有选项移除即更新操作
$("#department option:not(:first)").remove();
var url = "${pageContext.request.contextPath}/getDepartment.do";
// 获取选中的 value 值，locationId
var val = $(this).val();
// 如果所选值不是第一个那么就开始执行 Ajax 操作，并将所选择的location 的 id 传到 servlet 中
if (val != "choose") {
var args = {"time": new Date, "value": val};
$.getJSON(url, args, function (data) {
if (data == 0) {
// 若传回的数据为空则提示错误消息
alert("当前城市没有部门");
} else {
// 否则将其加入对应的下拉框中
for (var i = 0; i < data.length; i++) {
var departmentId = data[i].departmentId;
var departmentName = data[i].departmentName;
$("#department").append("<option value='" + departmentId + "'>" + departmentName + "</option>");
}
}
})
}
})
$("#department").change(function () {
$("#employee option:not(:first)").remove();
var url = "${pageContext.request.contextPath}/getEmployee.do";
// 获取选中的 value 值，departmentId
var val = $(this).val();
alert(val)
if (val != "choose") {
var args = {"time": new Date, "value": val};
$.getJSON(url, args, function (data) {
if (data == 0) {
alert("当前部门没有员工");
} else {
for (var i = 0; i < data.length; i++) {
var employeeId = data[i].employeeId;
var lastName = data[i].lastName;
$("#employee").append("<option value='" + employeeId + "'>" + lastName + "</option>");
}
}
})
}
})
</script>
getDepartments（Servlet 方法，根据所选择的 location 信息获取对应的 departments 信息）
protected void getDepartment(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Integer locationId = Integer.valueOf(request.getParameter("value"));
DepartmentsDao departmentsDao = new DepartmentsImpl();
List<Departments> departmentsList = departmentsDao.getAll(locationId);
ObjectMapper mapper = new ObjectMapper();
将返回值转换为 json 格式
String result = mapper.writeValueAsString(departmentsList);
response.setContentType("text/javascript");
response.getWriter().print(result);
}
getEmployees （Servlet 方法，根据所选择的 departments 信息获取对应的 employees 列表）
protected void getEmployee(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Integer departmentId = Integer.valueOf(request.getParameter("value"));
EmployeesDao departmentsDao = new EmployessDaoImpl();
List<Employees> employeesList = departmentsDao.getAll(departmentId);
ObjectMapper mapper = new ObjectMapper();
String result = mapper.writeValueAsString(employeesList);
response.setContentType("text/javascript");
response.getWriter().print(result);
}
c. 选择对应的 employee 将其信息打印在页面（在这里我将完成的 jsp 页面和 servlet 代码粘贴在这里）
selectList.jsp
<%--
Created by IntelliJ IDEA.
User: yin'zhao
Date: 2017/12/04
Time: 21:37
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>ShowInfoPage</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
/*
* 刚开始将用于 employees 显示的表格隐藏
* */
$("#table").hide();
$("#city").change(function () {
$("#department option:not(:first)").remove();
var url = "${pageContext.request.contextPath}/getDepartment.do";
// 获取选中的 value 值，locationId
var val = $(this).val();
if (val != "choose") {
var args = {"time": new Date, "value": val};
$.getJSON(url, args, function (data) {
if (data == 0) {
alert("当前城市没有部门");
} else {
for (var i = 0; i < data.length; i++) {
var departmentId = data[i].departmentId;
var departmentName = data[i].departmentName;
$("#department").append("<option value='" + departmentId + "'>" + departmentName + "</option>");
}
}
})
}
})
$("#department").change(function () {
$("#employee option:not(:first)").remove();
var url = "${pageContext.request.contextPath}/getEmployee.do";
// 获取选中的 value 值，departmentId
var val = $(this).val();
alert(val)
if (val != "choose") {
var args = {"time": new Date, "value": val};
$.getJSON(url, args, function (data) {
if (data == 0) {
alert("当前部门没有员工");
} else {
for (var i = 0; i < data.length; i++) {
var employeeId = data[i].employeeId;
var lastName = data[i].lastName;
$("#employee").append("<option value='" + employeeId + "'>" + lastName + "</option>");
}
}
})
}
})
$("#employee").change(function () {
var url = "${pageContext.request.contextPath}/showEmployee.do";
// 获取选中的 value 值，departmentId
var val = $(this).val();
if (val != "choose") {
var args = {"time": new Date, "value": val};
$.getJSON(url, args, function (data) {
var employeeId = data.employeeId;
var lastName = data.lastName;
var email = data.email;
// 如果所选择的为 employees 而不是第一行，那么就将表格显示，并加入数据
$("#table").show();
$("#employeeId").text(employeeId);
$("#lastName").text(lastName);
$("#email").text(email);
})
} else {
// 若选择的不是 employees 则将其隐藏
$("#table").hide();
}
})
})
</script>
</head>
<body>
<spac>City: </spac>
<select name="citySelect" id="city">
<option value="choose">请选择</option>
<c:forEach items="${requestScope.locations}" var="location">
<option value="${location.locationId}">${location.city}</option>
</c:forEach>
</select>
<span> </span>
<span>Department: </span>
<select name="departmentSelect" id="department">
<option value="choose">请选择</option>
</select>
<span> </span>
<span>Employee: </span>
<select name="employeeSelect" id="employee">
<option value="choose">请选择</option>
</select>
/*
将 employees 的详细信息打印在此表格中
*/
<table cellspacing="0" border="1" cellpadding="10" id="table">
<tr>
<th>employeeId</th>
<th>lastName</th>
<th>email</th>
</tr>
<tr>
<td id="employeeId"></td>
<td id="lastName"></td>
<td id="email"></td>
</tr>
</table>
</body>
</html>
ShowInfoServlet.java
package com.javaweb.userajax.serlet.list.show.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.javaweb.userajax.serlet.list.show.dao.DepartmentsDao;
import com.javaweb.userajax.serlet.list.show.dao.EmployeesDao;
import com.javaweb.userajax.serlet.list.show.dao.LocationsDao;
import com.javaweb.userajax.serlet.list.show.daoimpl.DepartmentsImpl;
import com.javaweb.userajax.serlet.list.show.daoimpl.EmployessDaoImpl;
import com.javaweb.userajax.serlet.list.show.daoimpl.LocationsDaoImpl;
import com.javaweb.userajax.serlet.list.show.domain.Departments;
import com.javaweb.userajax.serlet.list.show.domain.Employees;
import com.javaweb.userajax.serlet.list.show.domain.Locations;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.util.List;
/**
* Created by shkstart on 2017/12/06.
*/
public class ShowInfoServlet extends HttpServlet {
// 获取请求的参数，利用反射执行当前类中对应的方法
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String servletPath = request.getServletPath();
String methodName = servletPath.substring(1, servletPath.length() - 3);
try {
Method method = getClass().getDeclaredMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
method.invoke(this, request, response);
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void getCity(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
LocationsDao locationsDao = new LocationsDaoImpl();
List<Locations> locationsList = locationsDao.getAll();
request.setAttribute("locations", locationsList);
request.getRequestDispatcher("/selectList/selectList.jsp").forward(request, response);
}
protected void getDepartment(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Integer locationId = Integer.valueOf(request.getParameter("value"));
DepartmentsDao departmentsDao = new DepartmentsImpl();
List<Departments> departmentsList = departmentsDao.getAll(locationId);
ObjectMapper mapper = new ObjectMapper();
String result = mapper.writeValueAsString(departmentsList);
response.setContentType("text/javascript");
response.getWriter().print(result);
}
protected void getEmployee(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Integer departmentId = Integer.valueOf(request.getParameter("value"));
EmployeesDao departmentsDao = new EmployessDaoImpl();
List<Employees> employeesList = departmentsDao.getAll(departmentId);
ObjectMapper mapper = new ObjectMapper();
String result = mapper.writeValueAsString(employeesList);
response.setContentType("text/javascript");
response.getWriter().print(result);
}
protected void showEmployee(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Integer employeeId = Integer.valueOf(request.getParameter("value"));
EmployeesDao employeesDao = new EmployessDaoImpl();
Employees employees = employeesDao.getEmp(employeeId);
ObjectMapper mapper = new ObjectMapper();
String result = mapper.writeValueAsString(employees);
System.out.println(result);
response.setContentType("text/javascript");
response.getWriter().print(result);
}
}
- ios开发基础知识 － 2
- ios开发基础知识 － 1
- 为UINavigationBar添加自定义背景
- UIScrollView无法响应touches的解决方法
- WCF技术剖析之十七：消息（Message）详解（下篇）
- UITextView自动滚动的解决方案
- MVC解决Json DataGrid返回的日期格式是/Date(20130450000365)
- Easyui 让DataGrid适应浏览器宽度
- Easyui 让Window弹出居中与最大化后居中
- WCF技术剖析之十六：数据契约的等效性和版本控制
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（13）-系统日志和异常的处理③
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（12）-系统日志和异常的处理②
- Enterprise Library Policy Injection Application Block 之二： PIAB设计和实现原理
- 育碧与研究所共同开发的AI，是什么样的？
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 将土味情话语录设置为桌面壁纸
- Java中多线程的使用（超级超级详细）线程安全原理解析 4
- Java中多线程的使用（超级超级详细） Thead类的使用 3
- Java Properties集合基础解析
- File 类基础解析3 文件过滤器优化
- 原创 | 我在git merge的时候遇到了冲突，怎么解决？
- protobuffer的前世今生（一）——简介
- protobuffer的前世今生（二）——编码
- Java中多线程的使用（超级超级详细）+多线程的实现原理 2
- protobuffer的前世今生（三）——序列化和反序列化性能比较
- 女生勿扰，只适合男孩子的 Python 爬虫，里面东西不给钱统统白送
- LTP 4来了！
- protobuffer的前世今生（五）——在Java中的两种使用方式之注解模式
- Java File类基础解析 1
- jit即使编译语言调用c++