Ajax學習筆記-三級聯動

標籤：三級聯動

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/4C/04/wKiom1Q2m8GRuHAhAACI9GIF62k176.jpg" title="QQ20141009222851.png" alt="wKiom1Q2m8GRuHAhAACI9GIF62k176.jpg" />

三個實體類

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";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 blocke.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"%><!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請求發出時執行$.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("<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("當前部門沒有員工");}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("資料丟失");}else{$("#employee_id").text(data.employeeId);$("#last_name").text(data.lastName);$("#email").text(data.email);$("#salary").text(data.salary);}});}//}});})</script></head><body><img  id="loading" src="${pageContext.request.contextPath}/images/loading.gif" style="display: none">City:<select id="city"><option value="">請選擇...</option><c:forEach items="${locations}" var="location"><option value="${location.location_id}">${location.city}</option></c:forEach></select> Department:<select id="department"><option value="">請選擇...</option></select> Employee:<select id="employee"><option value="">請選擇...</option></select><br /> 員工編號:<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）

本文出自 “阿凡達” 部落格，請務必保留此出處http://shamrock.blog.51cto.com/2079212/1561911

Ajax學習筆記-三級聯動