Ajax學(xué)習(xí)筆記-三級(jí)聯(lián)動(dòng)

成都創(chuàng)新互聯(lián)是一家以網(wǎng)站建設(shè)公司、網(wǎng)頁(yè)設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、成都網(wǎng)站營(yíng)銷(xiāo)、小程序App開(kāi)發(fā)等移動(dòng)開(kāi)發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為茶樓設(shè)計(jì)等眾行業(yè)中小客戶(hù)提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開(kāi)發(fā)服務(wù)。

三個(gè)實(shí)體類(lèi)

Location.java

public class Location {
	private Integer location_id;
	private String city;
	//...
}

Department.java

public class Department {
	private Integer department_id;
	private String departmentName;
	private Integer location_id;
	//...
}

Employee.java

public class Employee {
	private Integer employeeId;
	private String lastName;
	private String email;
	private double salary;
	private Integer department_id;
	//...
}

WebContent下的emplooyes.jsp中只有一行代碼，跳轉(zhuǎn)到servlet

<%
	response.sendRedirect("EmployeeServlet?method=listLocations");
%>

EmployeeServlet.java

public class EmployeeServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String methodName = request.getParameter("method");
		try {
			Method method = getClass().getDeclaredMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
			method.invoke(this, request, response);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	
	protected void listLocations(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Connection connection = DBManager.getConnection();
		String sql = "select * from location";
		List<Location>locations = new ArrayList<Location>();
		Statement statement = null;
		ResultSet resultSet = null;
		Location location = null;
		try {
			statement = connection.createStatement();
			resultSet = statement.executeQuery(sql);
			while(resultSet.next()){
				location = new Location();
				location.setCity(resultSet.getString("city"));
				location.setLocation_id(resultSet.getInt("location_id"));
				locations.add(location);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			DBManager.close(resultSet, statement, connection);
		}
		request.setAttribute("locations", locations);
		request.getRequestDispatcher("/WEB-INF/pages/employees.jsp").forward(request, response);
	}
	
	protected void listDepartments(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		int locationId = Integer.parseInt(request.getParameter("locationId"));
		String sql = "select * from department where location_id = " + locationId;
		Connection connection = DBManager.getConnection();
		List<Department>departments = new ArrayList<Department>();
		Department department = null;
		ResultSet resultSet = null;
		Statement statement = null;
		try {
			statement = connection.createStatement();
			resultSet = statement.executeQuery(sql);
			while(resultSet.next()){
				department = new Department();
				department.setDepartmentName(resultSet.getString("departmentName"));
				department.setDepartment_id(resultSet.getInt("department_id"));
				department.setLocation_id(resultSet.getInt("location_id"));
				departments.add(department);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			DBManager.close(resultSet, statement, connection);
		}
		ObjectMapper mapper = new ObjectMapper();
		String result = mapper.writeValueAsString(departments);
		System.out.println(result);
		response.setContentType("text/javascript");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().print(result);
	}
	
	protected void listEmployees(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		int department_id = Integer.parseInt(request.getParameter("department_id"));
		String sql = "select * from employee where department_id = " + department_id;
		Connection connection = DBManager.getConnection();
		Statement statement = null;
		ResultSet resultSet = null;
		List<Employee>employees = new ArrayList<Employee>();
		Employee employee = null;
		try {
			statement = connection.createStatement();
			resultSet = statement.executeQuery(sql);
			while(resultSet.next()){
				employee = new Employee();
				employee.setDepartment_id(resultSet.getInt("department_id"));
				employee.setEmail(resultSet.getString("email"));
				employee.setEmployeeId(resultSet.getInt("employee_id"));
				employee.setLastName(resultSet.getString("last_name"));
				employee.setSalary(resultSet.getDouble("salary"));
				employees.add(employee);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally{
			DBManager.close(resultSet, statement, connection);
		}
		ObjectMapper mapper = new ObjectMapper();
		String result = mapper.writeValueAsString(employees);
		System.out.println(result);
		response.setContentType("text/javascript");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().print(result);
	}
	
	protected void listEmployeeInfo(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		int employeeId = Integer.parseInt(request.getParameter("employeeId"));
		String sql = "select * from employee where employee_id = " + employeeId;
		System.err.println(sql);
		Connection connection = DBManager.getConnection();
		Statement statement = null;
		ResultSet resultSet = null;
		Employee employee = null;
		try {
			statement = connection.createStatement();
			resultSet = statement.executeQuery(sql);
			if (resultSet.next()) {
				employee = new Employee();
				employee.setDepartment_id(resultSet.getInt("department_id"));
				employee.setEmail(resultSet.getString("email"));
				employee.setEmployeeId(resultSet.getInt("employee_id"));
				employee.setLastName(resultSet.getString("last_name"));
				employee.setSalary(resultSet.getDouble("salary"));
			}
		}catch(Exception e){
			e.printStackTrace();
		}finally{
			DBManager.close(resultSet, statement, connection);
		}
		ObjectMapper mapper = new ObjectMapper();
		String result = mapper.writeValueAsString(employee);
		System.out.println(result);
		response.setContentType("text/javascript");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().print(result);
	}
	
	public static void main(String[] args) {
		System.out.println(DBManager.getConnection());
	}
}

/WEB-INF/pages/employees.jsp瀏覽器不可達(dá)，只能通過(guò)servlet跳轉(zhuǎn)到該頁(yè)面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>Insert title here</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.blockUI.js"></script>
<script type="text/javascript">
	$(function(){
		$(document).ajaxStart(function(){
			//使用blockUI。ajax請(qǐng)求發(fā)出時(shí)執(zhí)行
			$.blockUI({
			message:$('#loading'),
			css:{
				top:($(window).height() - 400)/2 + 'px',
				left:($(window).width() - 400)/2 + 'px',
				width:'400px'
			},
			overlayCSS:{backgroundColor:'#00f'}
			})
		}).ajaxStop($.unblockUI);
		
		
		$("#city").change(function(){
			$("#department option:not(:first)").remove();
			var location_id = $(this).val();
			if(location_id != ""){
				var url = "EmployeeServlet?method=listDepartments";
				var args = {"locationId":location_id, "time":new Date()};
				
				$.getJSON(url, args, function(data){
					if(data.length == 0){
						alert("當(dāng)前城市沒(méi)有部門(mén)");
					}else{
						for(var i = 0; i < data.length; i++){
							var deptName = data[i].departmentName;
							var deptId = data[i].department_id;
							//alert(deptName);
							$("#department").append("<option value='"+deptId+"'>"+deptName+"</option>");
						}
					}
				});
			}
		});
		$("#department").change(function(){
			$("#employee option:not(:first)").remove();
			var department_id = $(this).val();
			if(department_id != ""){
				var url = "EmployeeServlet?method=listEmployees";
				var args = {"department_id":department_id, "time":new Date()};
				$.getJSON(url, args, function(data){
					if(data.length == 0){
						alert("當(dāng)前部門(mén)沒(méi)有員工");
					}else{
						for(var i = 0; i < data.length; i ++){
							var lastName = data[i].lastName;
							var email = data[i].email;
							var salary = data[i].salary;
							var employeeId = data[i].employeeId;
							$("#employee").append("<option value='"+employeeId+"'>"+lastName+"</option>");
						}
					}
				});
			}
		});
		$("#employee").change(function(){
			var employeeId = $(this).val();
			if(employeeId != ""){
				var url = "EmployeeServlet?method=listEmployeeInfo";
				var args = {"employeeId":employeeId, "time":new Date()};
				$.getJSON(url, args, function(data){
					if(data.length == 0){
						alert("數(shù)據(jù)丟失");
					}else{
						$("#employee_id").text(data.employeeId);
						$("#last_name").text(data.lastName);
						$("#email").text(data.email);
						$("#salary").text(data.salary);
					}
				});
			}
			//}
		});
	})
</script>
</head>
<body>
	<img alt="" id="loading" src="${pageContext.request.contextPath}/p_w_picpaths/loading.gif" >
	City:
	<select id="city">
		<option value="">請(qǐng)選擇...</option>
		<c:forEach items="${locations}" var="location">
			<option value="${location.location_id}">${location.city}</option>
		</c:forEach>
	</select> Department:
	<select id="department">
		<option value="">請(qǐng)選擇...</option>
	</select> Employee:
	<select id="employee">
		<option value="">請(qǐng)選擇...</option>

	</select>
	<br /> 員工編號(hào):
	<span id="employee_id"></span>
	<br /> 姓名：
	<span id="last_name"></span>
	<br /> email：
	<span id="email"></span>
	<br /> 薪水：
	<span id="salary"></span>
	<br />
</body>
</html>

源碼 http://yunpan.cn/cgephkTV2Tcmh （提取碼：2492）

網(wǎng)頁(yè)名稱(chēng)：Ajax學(xué)習(xí)筆記-三級(jí)聯(lián)動(dòng)
當(dāng)前URL：http://muchs.cn/article12/jehhdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、軟件開(kāi)發(fā)、網(wǎng)站收錄、App設(shè)計(jì)、Google、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)