实现动态展示员工信息


controller.SelectDeptnoAndJobController
package controller;import com.alibaba.fastjson.JSONObject;import service.EmpService;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.List;@WebServlet("/selectDeptnoAndJob")public class SelectDeptnoAndJobController extends HttpServlet {private EmpService service = new EmpService();@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//控制层的目的是为了查询deptno和jobList<Integer> deptnoList = service.selectAllDeptno();List<String> jobList = service.selectAllJob();//将查询到的两个集合响应回浏览器 JSONJSONObject json=new JSONObject();//可以理解为json是一个大容器json.put("deptnoList",deptnoList);json.put("jobList",jobList);//给予响应response.setCharacterEncoding("UTF-8");response.getWriter().write(json.toJSONString());}}
controller.SelectEmpController
package controller;import com.alibaba.fastjson.JSONObject;import domain.Emp;import service.EmpService;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.List;@WebServlet("/selectEmp")public class SelectEmpController extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("UTF-8");String deptno=req.getParameter("deptno");String job=req.getParameter("job");String order=req.getParameter("order");EmpService service = new EmpService();List<Emp> empList= service.selectEmpByMybatis(deptno,job,order);JSONObject json=new JSONObject();json.put("empList",empList);resp.setCharacterEncoding("UTf-8");resp.getWriter().write(json.toJSONString());}}
dao.EmpDao
package dao;import domain.Emp;import org.apache.ibatis.session.SqlSession;import util.MyUtil;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.util.ArrayList;import java.util.List;import java.util.Map;public class EmpDao {private SqlSession sqlSession = MyUtil.getSqlSession(true);//设计两个方法 分别查询所有的deptno 和 所有的jobpublic List<Integer> selectAllDeptno(){return sqlSession.selectList("selectAllDeptno");}public List<String> selectAllJob(){return sqlSession.selectList("selectAllJob");}//设计一个方法 根据service层给定的两个条件查询emp对象public List<Emp> selectEmpByMybatis(Map<String,Object> params){return sqlSession.selectList("selectEmpByMybatis",params);}}
domain.Emp(省略,见表格自行想象)
mapper.EmpMapper.xml
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="dao.EmpDao"><select id="selectAllDeptno" resultType="java.lang.Integer">select distinct deptno from emp order by deptno</select><select id="selectAllJob" resultType="java.lang.String">select distinct job from emp order by job</select><select id="selectEmpByMybatis" resultType="domain.Emp">select * from emp<!--满足if语句中的条件则拼接上where以及if标签内包含的语句--><where><if test="deptno!=null and deptno!='' ">and deptno = #{deptno}</if><if test="job!=null and job!='' ">and job = #{job}</if></where>order by sal<!--用法与where标签类似,when和otherwise类似于if else(在otherwise中写条件相当于elseif)--><choose><when test="order!=null and order=='desc' ">${order}</when><otherwise>asc</otherwise></choose></select></mapper>
service.EmpService
package service;
import dao.EmpDao;
import domain.Emp;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class EmpService {
private EmpDao empDao=new EmpDao();
public List<Integer> selectAllDeptno(){
return empDao.selectAllDeptno();
}
public List<String> selectAllJob(){
return empDao.selectAllJob();
}
//提供一个业务方法 根据给定的两个信息条件 查询emp对象的结果
public List<Emp> selectEmpByMybatis(String deptno, String job,String order){
Map<String,Object> params = new HashMap<>();
params.put("deptno",deptno);
params.put("job",job);
params.put("order",order);
return empDao.selectEmpByMybatis(params);
}
}
util包中类以及configuration.xml中的代码省略
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload=function () {
//获取下拉列表对象
var deptnoSelectEle = document.getElementById("deptnoSelect");
var jobSelectEle = document.getElementById("jobSelect");
var orderSelectEle = document.getElementById("orderSelect");
var xhr=new XMLHttpRequest();
xhr.open("post","selectDeptnoAndJob",true);
xhr.onreadystatechange=function () {
if(xhr.readyState==4&&xhr.status==200){
//处理响应信息,展示在下拉列表上
var json=JSON.parse(xhr.responseText);
//获取json当中的两个集合
var deptnoList=json.deptnoList;
var jobList=json.jobList;
//将集合中的信息取出,放在下拉列表中
for(var i=0;i<deptnoList.length;i++){
var newOptionObject=document.createElement("option");
newOptionObject.value=deptnoList[i];
newOptionObject.innerHTML=deptnoList[i];
deptnoSelectEle.appendChild(newOptionObject);
}
for(var i=0;i<jobList.length;i++){
var newOptionObject=document.createElement("option");
newOptionObject.value=jobList[i];
newOptionObject.innerHTML=jobList[i];
jobSelectEle.appendChild(newOptionObject);
}
}
}
xhr.send();
//给查询按钮绑定一个功能
document.getElementById("selectButton").onclick=function () {
//异步请求AJaX
xhr.open("post","selectEmp?deptno="+deptnoSelectEle.value+"&job="+jobSelectEle.value+"&order="+orderSelectEle.value,true);
xhr.onreadystatechange=function () {
if(xhr.readyState==4&&xhr.status==200){
//清空tbody部分
var tbody=document.getElementById("tbody");
tbody.innerHTML='';
var empList=JSON.parse(xhr.responseText).empList;
for(var i=0;i<empList.length;i++){
//每一次循环代表一个emp对象---展示在表格的一行内 tr
var newTrObject = document.createElement("tr");
//每一个emp对象中的8个属性
var empTdObject = document.createElement("td");
empTdObject.innerHTML=empList[i].empno;
newTrObject.appendChild(empTdObject);
var enameTdObject = document.createElement("td");
enameTdObject.innerHTML=empList[i].ename;
newTrObject.appendChild(enameTdObject);
var jobTdObject = document.createElement("td");
jobTdObject.innerHTML=empList[i].job;
newTrObject.appendChild(jobTdObject);
var mgrTdObject = document.createElement("td");
mgrTdObject.innerHTML=empList[i].mgr;
newTrObject.appendChild(mgrTdObject);
var hiredateTdObject = document.createElement("td");
hiredateTdObject.innerHTML=empList[i].hiredate;
newTrObject.appendChild(hiredateTdObject);
var salTdObject = document.createElement("td");
salTdObject.innerHTML=empList[i].sal;
newTrObject.appendChild(salTdObject);
var commTdObject = document.createElement("td");
commTdObject.innerHTML=empList[i].comm;
newTrObject.appendChild(commTdObject);
var deptnoTdObject = document.createElement("td");
deptnoTdObject.innerHTML=empList[i].deptno;
newTrObject.appendChild(deptnoTdObject);
//将新的行对象添加在tbody内
tbody.appendChild(newTrObject);
}
}
}
xhr.send();
}
}
</script>
</head>
<body>
<form action="" method="post">
<div align="center">
deptno:
<select id="deptnoSelect" name="deptnoSelect">
<option value="">==请选择==</option>
</select>
job:
<select id="jobSelect" name="jobSelect">
<option value="">==请选择==</option>
</select>
order:
<select id="orderSelect" name="jobSelect">
<option value="asc">ASC</option>
<option value="desc">DESC</option>
</select>
<input id="selectButton"type="button" name="selectButton" value="查询">
</div>
</form>
<br>
<table id="showTable" align="center" border="1" width="80%">
<tr>
<th>empno</th><th>ename</th><th>job</th><th>mgr</th><th>hiredate</th><th>sal</th><th>comm</th><th>deptno</th>
</tr>
<tbody id="tbody"></tbody>
</table>
</body>
</html>
