Ajax-典型应用-三级联动

最新推荐文章于 2022-10-06 15:33:50 发布

轻小說控

最新推荐文章于 2022-10-06 15:33:50 发布

阅读量238

点赞数

分类专栏： Ajax 文章标签： Ajax-典型应用-三级联动

本文链接：https://blog.csdn.net/Aqours/article/details/100833171

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax

典型应用_三级联动_需求及准备

①先在WebContent下新建employees.jsp用来转发到pages文件夹下的employees.jsp页面

<!-- 这个方法也行  直接去listLocations页面
<jsp:forward page="EmployeeServlet?method=listLocations"></jsp:forward>
-->
<%
	response.sendRedirect("EmployeeServlet?method=listLocations");
%>

②在src下新建com.atguigu.ajax.app.dao包，包下有BaseDao.java和DBManager.java

BaseDao.java

import java.sql.Connection;
import java.util.List;

import org.apache.commons.dbutils.DbUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
/*
 * 因为该应用中没有出现事务，所以直接在方法中获取Connection,关闭Connection
 */
public class BaseDao {	
	private static final QueryRunner runner=new QueryRunner();
	
	public <T> List<T> getForList(String sql,Class<T> clazz,Object ...args){
		List<T> list=null;
		
		Connection conn=null;
		try {
			conn=DBManager.getInstance().getConnection();
			list=runner.query(conn, sql, new BeanListHandler<T>(clazz),args);
		} catch (Exception e) {
			throw new RuntimeException(e);
		}finally {
			DbUtils.closeQuietly(conn);
		}
		return list;
	}
	
	public <T> T get(String sql,Class<T> clazz,Object...args) {
		T result=null;
		Connection conn=null;
		
		try {
			conn=DBManager.getInstance().getConnection();
			result=runner.query(conn, sql, new BeanHandler<T>(clazz),args);
		} catch (Exception e) {
			throw new RuntimeException(e);
		}finally {
			DbUtils.closeQuietly(conn);
		}
		return result;
	}
}

DBManager.java

import java.sql.Connection;

import javax.sql.DataSource;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class DBManager {
	private static DataSource dataSource;
	
	static{
		dataSource= new ComboPooledDataSource("ajaxApp");
	}
	
	public Connection getConnection() {
		Connection conn=null;
		if(dataSource!=null) {
			try {
				conn=dataSource.getConnection();
			} catch (Exception e) {
				throw new RuntimeException(e);
			}
		}
		return conn;
	}
	private DBManager() {};
	
	private static DBManager instance=new DBManager(); 
	
	static DBManager getInstance() {
		return instance;
	}
}

③在com.atguigu.ajax.app.beans包下新建几个beans

Department.java

public class Department {
	private Integer departmentId;
	private String departmentName;
	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;
	}
	
}

Employee.java

public class Employee {
	private Integer employeeId;
	private String lastName;
	private String email;
	private double salary;
	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 double getSalary() {
		return salary;
	}
	public void setSalary(double salary) {
		this.salary = salary;
	}
	
	
}

Location.java

public class Location {
	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;
	}
	
}

④在com.atguigu.ajax.app.servlets包下新加一个EmployeeServlet.java的servlet

EmployeeServlet.java

import java.io.IOException;
import java.lang.reflect.Method;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.atguigu.ajax.app.beans.Department;
import com.atguigu.ajax.app.beans.Location;
import com.atguigu.ajax.app.dao.BaseDao;
import com.fasterxml.jackson.databind.ObjectMapper;


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();
		} 
		
	}
	
	private BaseDao baseDao=new BaseDao();
	
	protected void listLocations(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String sql="SELECT location_id locationId,city FROM locations";
		List<Location> locations=baseDao.getForList(sql, Location.class);
		request.setAttribute("locations",locations);
		
		request.getRequestDispatcher("/WEB-INF/pages/employees.jsp").forward(request, response);
	}
	
	protected void listDepartments(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String locationId=request.getParameter("locationId");
		String sql="SELECT department_id departmentId,"
						+" department_name departmentName "
						+ " FROM departments d WHERE d.location_id=?";
		List<Department> departments=baseDao.getForList(sql, Department.class,Integer.parseInt(locationId));
		ObjectMapper mapper=new ObjectMapper();
		String result=mapper.writeValueAsString(departments);
		
		response.setContentType("text/javascript");
		response.getWriter().print(result);
		
	}

}

web.xml配置

<servlet>
    <description></description>
    <display-name>EmployeeServlet</display-name>
    <servlet-name>EmployeeServlet</servlet-name>
    <servlet-class>com.atguigu.ajax.app.servlets.EmployeeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>EmployeeServlet</servlet-name>
    <url-pattern>/EmployeeServlet</url-pattern>
  </servlet-mapping>
</web-app>

⑤在lib目录下加入如下jar包

c3p0-0.9.1.2.jar
commons-dbutils-1.7.jar
jackson-annotations-2.2.1.jar
jackson-core-2.2.1.jar
jackson-databind-2.2.1.jar
jstl.jar
mysql-connector-java-5.1.46-bin.jar
standard.jar

⑥在src下新建c3p0-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>

	<named-config name="ajaxApp">
		
		<!-- 指定连接数据源的基本属性 -->
		<property name="user">xuefeng</property>
		<property name="password">1234</property>
		<property name="driverClass">com.mysql.jdbc.Driver</property>
		<property name="jdbcUrl">jdbc:mysql://localhost:3306/myemployees？useUnicode=true&amp;characterEncoding=UTF-8</property>
		
		<!-- 若数据库中连接数不足时, 一次向数据库服务器申请多少个连接 -->
		<property name="acquireIncrement">2</property>
		<!-- 初始化数据库连接池时连接的数量 -->
		<property name="initialPoolSize">2</property>
		<!-- 数据库连接池中的最小的数据库连接数 -->
		<property name="minPoolSize">2</property>
		<!-- 数据库连接池中的最大的数据库连接数 -->
		<property name="maxPoolSize">3</property>

		<!-- C3P0 数据库连接池可以维护的 Statement 的个数 -->
		<property name="maxStatements">5</property>
		<!-- 每个连接同时可以使用的 Statement 对象的个数 -->
		<property name="maxStatementsPerConnection">2</property>
	
	</named-config>
		
</c3p0-config>

⑦在WEB-INF下新建一个pages文件夹，文件夹下有employees.jsp

<%@ 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>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-blockUI.js"></script>
 <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.9.1.min.js"></script>
<!-- 
1.获取#city ,添加change相应函数
2.使#department只保留一个option子节点
3.获取 #city选择的值，若该值为  " " ,即选择的是"请选择..."  此时不需要发送Ajax请求
4.若值不为"",说明的确实city发生了变化，准备Ajax请求
	4.1  url:EmployeeServlet?method=listDepartments
	4.2  args:locationId,time
5.返回的是一个JSON数组
	5.1若返回的数组中的元素为0: 提示  "当前城市没有部门"
	5.2若返回的数组中的元素不为0: 遍历  创建<option value="departmentId">departmentName</option>
	并把新创建的option节点加为#department的子节点

 -->
<script type="text/javascript">
	$(function() {
		$("#city").change(function() {
			$("#department option:not(:first)").remove();
			var city=$(this).val();
			
			if(city != ""){
				var url="EmployeeServlet?method=listDepartments";
				var args={"locationId":city,"time":new Date()};
				
				$.getJSON(url,args,function(data){
					if(data.length == 0){
						alert("当前城市没有部门");
					}else{
						for (var i = 0; i < data.length; i++) {
							var deptId=data[i].departmentId;
							var deptName=data[i].departmentName;
							
							$("#department").append("<option value=' " +deptId+"'>" + deptName+ "</option>");
						}
					}
				})
			
			}
		});
	});
</script>
</head>
<body>
	<img alt=" " id="loading" src="images/loading.gif" style="display:none"> 
	<center>
		<br><br>
		City:
		<select  id="city">
			<option value="">请选择...</option>
			<c:forEach items="${locations }" var="location">
				<option value="${location.locationId }">${location.city }</option>
			</c:forEach>
		</select>
		
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		
		Department:
		<select id="department">
			<option value="">请选择...</option>
		</select>
		
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		
		Employee:
		<select id="employee">
			<option value="">请选择...</option> 
		</select>
		
		<br><br>
		<table id="empdetails" border="1" cellspacing="0" cellpadding="5" style="display:none">
			<tr>
				<th>Id</th>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
			</tr>
			<tr>
				<td id="id"></td>
				<td id="name"></td>
				<td id="email"></td>
				<td id="salary"></td>
			</tr>
		</table>
	</center>
</body>
</html>

效果页面

使用 BlockUI

使用BlockUI: Ajax请求发出时执行，Ajax响应送达时执行$.unblockUI
$(d o c u m e n t) . a j a x S t a r t ($ .blockUI).ajaxStop( $. u n b l o c k U I); 可以对样式做出修改 : 需要把$ .blockUI包含到一个function(){}中
```
$(document).ajaxStart(function(){
			$.blockUI({
				message:$('#loading'),
				css:{
					top: ($(window).height() - 400 )/2 +'px',
					left: ($(window).width() -400)/2 + 'px',
					width: '400px',
					border: 'none'
				}
				overlayCSS:{backgroundColor: '#fff'}
			})
		}).ajaxStop($.unblockUI);
```
具体效果可以参看文档

使用BlockUI后的employees.jsp

<script type="text/javascript">
	$(function() {
		
		//使用blockUI
		$(document).ajaxStart(function(){
			$.blockUI({
				message:$('#loading'),
				css:{
					top: ($(window).height() - 400 )/2 +'px',
					left: ($(window).width() -400)/2 + 'px',
					width: '400px',
					border: 'none'
				},
				overlayCSS:{backgroundColor: '#fff'}
			})
		}).ajaxStop($.unblockUI);
		
		$("#city").change(function() {
			$("#department option:not(:first)").remove();
			var city=$(this).val();
			
			if(city != ""){
				var url="EmployeeServlet?method=listDepartments";
				var args={"locationId":city,"time":new Date()};
				
				$.getJSON(url,args,function(data){
					if(data.length == 0){
						alert("当前城市没有部门");
					}else{
						for (var i = 0; i < data.length; i++) {
							var deptId=data[i].departmentId;
							var deptName=data[i].departmentName;
							
							$("#department").append("<option value=' " +deptId+"'>" + deptName+ "</option>");
						}
					}
				})
			
			}
		});
	});
</script>

效果图

轻小說控

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax-典型应用-三级联动

Ajax典型应用_三级联动_需求及准备①先在WebContent下新建employees.jsp用来转发到pages文件夹下的employees.jsp页面<!-- 这个方法也行直接去listLocations页面<jsp:forward page="EmployeeServlet?method=listLocations"></jsp:forward&...
复制链接

扫一扫