实现动态展示员工信息
    image.png
    image.png
    image.png
    controller.SelectDeptnoAndJobController

    1. package controller;
    2. import com.alibaba.fastjson.JSONObject;
    3. import service.EmpService;
    4. import javax.servlet.ServletException;
    5. import javax.servlet.annotation.WebServlet;
    6. import javax.servlet.http.HttpServlet;
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpServletResponse;
    9. import java.io.IOException;
    10. import java.util.List;
    11. @WebServlet("/selectDeptnoAndJob")
    12. public class SelectDeptnoAndJobController extends HttpServlet {
    13. private EmpService service = new EmpService();
    14. @Override
    15. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    16. //控制层的目的是为了查询deptno和job
    17. List<Integer> deptnoList = service.selectAllDeptno();
    18. List<String> jobList = service.selectAllJob();
    19. //将查询到的两个集合响应回浏览器 JSON
    20. JSONObject json=new JSONObject();//可以理解为json是一个大容器
    21. json.put("deptnoList",deptnoList);
    22. json.put("jobList",jobList);
    23. //给予响应
    24. response.setCharacterEncoding("UTF-8");
    25. response.getWriter().write(json.toJSONString());
    26. }
    27. }

    controller.SelectEmpController

    1. package controller;
    2. import com.alibaba.fastjson.JSONObject;
    3. import domain.Emp;
    4. import service.EmpService;
    5. import javax.servlet.ServletException;
    6. import javax.servlet.annotation.WebServlet;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import java.io.IOException;
    11. import java.util.List;
    12. @WebServlet("/selectEmp")
    13. public class SelectEmpController extends HttpServlet {
    14. @Override
    15. protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    16. req.setCharacterEncoding("UTF-8");
    17. String deptno=req.getParameter("deptno");
    18. String job=req.getParameter("job");
    19. String order=req.getParameter("order");
    20. EmpService service = new EmpService();
    21. List<Emp> empList= service.selectEmpByMybatis(deptno,job,order);
    22. JSONObject json=new JSONObject();
    23. json.put("empList",empList);
    24. resp.setCharacterEncoding("UTf-8");
    25. resp.getWriter().write(json.toJSONString());
    26. }
    27. }

    dao.EmpDao

    1. package dao;
    2. import domain.Emp;
    3. import org.apache.ibatis.session.SqlSession;
    4. import util.MyUtil;
    5. import java.sql.Connection;
    6. import java.sql.DriverManager;
    7. import java.sql.PreparedStatement;
    8. import java.sql.ResultSet;
    9. import java.util.ArrayList;
    10. import java.util.List;
    11. import java.util.Map;
    12. public class EmpDao {
    13. private SqlSession sqlSession = MyUtil.getSqlSession(true);
    14. //设计两个方法 分别查询所有的deptno 和 所有的job
    15. public List<Integer> selectAllDeptno(){
    16. return sqlSession.selectList("selectAllDeptno");
    17. }
    18. public List<String> selectAllJob(){
    19. return sqlSession.selectList("selectAllJob");
    20. }
    21. //设计一个方法 根据service层给定的两个条件查询emp对象
    22. public List<Emp> selectEmpByMybatis(Map<String,Object> params){
    23. return sqlSession.selectList("selectEmpByMybatis",params);
    24. }
    25. }

    domain.Emp(省略,见表格自行想象)
    mapper.EmpMapper.xml

    1. <?xml version="1.0" encoding="UTF-8" ?>
    2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    3. <mapper namespace="dao.EmpDao">
    4. <select id="selectAllDeptno" resultType="java.lang.Integer">
    5. select distinct deptno from emp order by deptno
    6. </select>
    7. <select id="selectAllJob" resultType="java.lang.String">
    8. select distinct job from emp order by job
    9. </select>
    10. <select id="selectEmpByMybatis" resultType="domain.Emp">
    11. select * from emp
    12. <!--满足if语句中的条件则拼接上where以及if标签内包含的语句-->
    13. <where>
    14. <if test="deptno!=null and deptno!='' ">
    15. and deptno = #{deptno}
    16. </if>
    17. <if test="job!=null and job!='' ">
    18. and job = #{job}
    19. </if>
    20. </where>
    21. order by sal
    22. <!--用法与where标签类似,when和otherwise类似于if else(在otherwise中写条件相当于elseif)-->
    23. <choose>
    24. <when test="order!=null and order=='desc' ">
    25. ${order}
    26. </when>
    27. <otherwise>
    28. asc
    29. </otherwise>
    30. </choose>
    31. </select>
    32. </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>