成都网站建设设计

将想法与焦点和您一起共享

Ajax学习笔记-三级联动

Ajax学习笔记-三级联动

成都创新互联是一家以网站建设公司、网页设计、品牌设计、软件运维、成都网站营销、小程序App开发等移动开发为一体互联网公司。已累计为茶楼设计等众行业中小客户提供优质的互联网建站和软件开发服务。

三个实体类

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中只有一行代码,跳转到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";
		Listlocations = new ArrayList();
		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();
		Listdepartments = new ArrayList();
		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;
		Listemployees = new ArrayList();
		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浏览器不可达,只能通过servlet跳转到该页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>




Insert title here



	$(function(){
		$(document).ajaxStart(function(){
			//使用blockUI。ajax请求发出时执行
			$.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("当前城市没有部门");
					}else{
						for(var i = 0; i < data.length; i++){
							var deptName = data[i].departmentName;
							var deptId = data[i].department_id;
							//alert(deptName);
							$("#department").append(""+deptName+"");
						}
					}
				});
			}
		});
		$("#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("当前部门没有员工");
					}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(""+lastName+"");
						}
					}
				});
			}
		});
		$("#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("数据丢失");
					}else{
						$("#employee_id").text(data.employeeId);
						$("#last_name").text(data.lastName);
						$("#email").text(data.email);
						$("#salary").text(data.salary);
					}
				});
			}
			//}
		});
	})



	
	City:
	
		请选择...
		
			${location.city}
		
	 Department:
	
		请选择...
	 Employee:
	
		请选择...

	
	 员工编号:
	
	 姓名:
	
	 email:
	
	 薪水:
	
	

源码 http://yunpan.cn/cgephkTV2Tcmh (提取码:2492)


网站题目:Ajax学习笔记-三级联动
链接URL:http://chengdu.cdxwcx.cn/article/jehhdc.html