Ajax实现动态及时刷新表格数据

╰+哭是因爲堅強的太久メ 2022-12-28 01:52 239阅读 0赞

![format_png][]

![format_png 1][]

大家好，我是雄雄，今天分享的技术很简单，即ajax结合jdbc动态实现及时刷新表单数据。

前言：相信大家在网上冲浪的时候，肯定会发现这样的场景，在实现某个查询功能时，下方表格中会显示需要展示的结果，当查询条件换掉之后，数据表格中显示的信息也会及时更新，今天，我们就来实现一下这样的功能。

效果图如下所示：

![format_png 2][]

**数据库：mysql**

**开发编辑器：myeclipse**

**浏览器：chrome**

采用java三层架构分层开发，首先我们先来看看数据库的表结构：

Emp表：

![format_png 3][]

Dept表：

![format_png 4][]

接下来就是按照表结构写实体类，代码如下：

Emp实体类：

package org.entity;
    
    public class Emp {
      
      private int eid;
      private String ename;
      private String epass;
      private int edid;
      private Dept dept;
      
      
      public Dept getDept() {
        return dept;
      }
      public void setDept(Dept dept) {
        this.dept = dept;
      }
      public int getEid() {
        return eid;
      }
      public void setEid(int eid) {
        this.eid = eid;
      }
      public String getEname() {
        return ename;
      }
      public void setEname(String ename) {
        this.ename = ename;
      }
      public String getEpass() {
        return epass;
      }
      public void setEpass(String epass) {
        this.epass = epass;
      }
      public int getEdid() {
        return edid;
      }
      public void setEdid(int edid) {
        this.edid = edid;
      }
      
      public Emp( String ename, String epass, int edid) {
        super();
        this.ename = ename;
        this.epass = epass;
        this.edid = edid;
      }
      
      public Emp(){
        
      }
      
      
    
    }

Dept实体类：

连接数据库所需的BaseDao：

接着，就是Dao层接口，IEmpDao：

接口实现类EmpDaoImpl：

package org.dao.impl;
    
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.ArrayList;
    import java.util.List;
    
    import org.dao.BaseDao;
    import org.dao.IEmpDao;
    import org.entity.Dept;
    import org.entity.Emp;
    
    import com.sun.corba.se.spi.orbutil.fsm.Guard.Result;
    
    public class EmpDaoImpl implements IEmpDao {
    
      private Connection conn;
      private PreparedStatement p;
      private ResultSet rs;
      BaseDao base = new BaseDao();
      
      @Override
      public int addEmp(Emp emp) {
        String sql = "insert into Emp(ename,epass,edid) values(?,?,?);";
        List<Object> prama = new ArrayList<Object>();
        prama.add(emp.getEname());
        prama.add(emp.getEpass());
        prama.add(emp.getEdid());
        int rel = 0;
        try {
          rel = base.ExecuteUpdate(sql, prama);
        } catch (SQLException e) {
          e.printStackTrace();
        }finally{
          base.closeConn(conn, p, rs);
        }
        return rel;
      }
    
      //查询全部
      @Override
      public List<Emp> findEmpAll() {
        String sql = "SELECT * FROM emp ,dept WHERE emp.edid = dept.did";
        List<Emp> eList = new ArrayList<Emp>();
        try {
          rs = base.ExecuteQuery(sql, null);
          while(rs.next()){
            Emp emp = new Emp();
            emp.setEid(rs.getInt("eid"));
            emp.setEname(rs.getString("ename"));
            emp.setEpass(rs.getString("epass"));
            emp.setEdid(rs.getInt("edid"));
            Dept dept = new Dept();
            dept.setDid(rs.getInt("did"));
            dept.setDname(rs.getString("dname"));
            emp.setDept(dept);
            eList.add(emp);
          }
        } catch (SQLException e) {
          // TODO Auto-generated catch block
          e.printStackTrace();
        }finally{
          base.closeConn(conn, p, rs);
        }
        return eList;
      }
    
      @Override
      public int delEmp(int eid) {
        String sql = "delete from emp where eid = ?;";
        List<Object> prama = new ArrayList<Object>();
        prama.add(eid);
        int rel = 0;
        try {
          rel = base.ExecuteUpdate(sql, prama);
        } catch (SQLException e) {
          e.printStackTrace();
        }finally{
          base.closeConn(conn, p, rs);
        }
        return rel;
      }
    
      
      @Override
      public Emp findEmpByName(String name) {
        String sql = "select * from Emp where ename =?";
        List<Object> pa= new ArrayList<Object>();
        pa.add(name);
        Emp emp = new Emp();
        try {
          rs = base.ExecuteQuery(sql, pa);
          while(rs.next()){
            emp.setEid(rs.getInt("eid"));
            emp.setEname(rs.getString(2));
            emp.setEpass(rs.getString(3));
            emp.setEdid(rs.getInt("edid"));
          }
        } catch (SQLException e) {
          // TODO Auto-generated catch block
          e.printStackTrace();
        }finally{
          base.closeConn(conn, p, rs);
        }
        return emp;
      }
    
      //根据部门编号查询
      @Override
      public List<Emp> findEmpByDid(int edid) {
        List<Emp> empList = new ArrayList<Emp>();
        List<Object> param = new ArrayList<Object>();
        String sql = null;
        if(edid!=0){
          sql = "SELECT * FROM emp ,dept WHERE emp.edid = dept.did and edid = ?";
          param.add(edid);
        }else{
          sql = "SELECT * FROM emp ,dept WHERE emp.edid = dept.did";
        }
        try {
          rs = base.ExecuteQuery(sql, param);
          while(rs.next()){
            Emp emp = new Emp();
            emp.setEid(rs.getInt("eid"));
            emp.setEname(rs.getString("ename"));
            emp.setEpass(rs.getString("epass"));
            emp.setEdid(rs.getInt("edid"));
            Dept dept = new Dept();
            dept.setDid(rs.getInt("did"));
            dept.setDname(rs.getString("dname"));
            emp.setDept(dept);
            empList.add(emp);
          }
        } catch (SQLException e) {
          e.printStackTrace();
        }finally{
          base.closeConn(conn, p, rs);
        }
        return empList;
      }
    
    }

Service层接口IEmpService：

package org.service;
    
    import org.dao.IEmpDao;
    
    public interface IEmpService extends IEmpDao {
    
    }

Service层实现类：EmpServiceImpl:

package org.service.impl;
    
    import java.util.List;
    
    import org.dao.IEmpDao;
    import org.dao.impl.EmpDaoImpl;
    import org.entity.Emp;
    import org.service.IEmpService;
    
    public class EmpServiceImpl implements IEmpService {
    
      IEmpDao empDao = new EmpDaoImpl();
      
      @Override
      public int addEmp(Emp emp) {
        return empDao.addEmp(emp);
      }
    
      @Override
      public List<Emp> findEmpAll() {
        // TODO Auto-generated method stub
        return empDao.findEmpAll();
      }
    
      @Override
      public int delEmp(int eid) {
        // TODO Auto-generated method stub
        return empDao.delEmp(eid);
      }
    
      @Override
      public Emp findEmpByName(String name) {
        // TODO Auto-generated method stub
        return empDao.findEmpByName(name);
      }
    
      @Override
      public List<Emp> findEmpByDid(int edid) {
        return empDao.findEmpByDid(edid);
      }
    
    }

主要内容在前台jsp页面，我们先来写一个下拉列表，用来存放Dept表中的所有部门名称，当加载该jsp页面时，先从数据库中查询所有部门名称，然后通过jstl遍历至下拉列表中。代码如下：

<%
            IEmpService empService = new EmpServiceImpl();
            List<Emp> empList = empService.findEmpAll();
          request.setAttribute("empList", empList);
          IDeptService deptService = new DeptServiceImpl();
          List<Dept> deptList = deptService.findAllDept();
          request.setAttribute("deptList", deptList);
         %>

部门编号：
      
         <select id="deptid">
             <option value="0">全部</option>
           <c:forEach items="${deptList }" var="dept">
             <option value="${dept.did }">${dept.dname }</option>
           </c:forEach>
         </select>
         
         <input type="button" id="serch" value="查询"/>

当点击查询按钮时，通过ajax去Servlet中，根据部门编号查询员工信息，在回调函数（success）中处理返回的json数据，遍历动态添加至表格中。

“查询”按钮 的点击事件：

//点击查询查询值
             $("#serch").click(function(){
               //获取部门编号
               //var edid = $("input[name='edid']").val();
               //获取下拉列表中的值
               var edid = $("#deptid").val();
               var data = {"edid":edid,"tag":"getEmpByEdid"};
               $.getJSON("EmpServlet",data,function(data){
                 $("#dataTable").html("<tr><td>编号</td><td>姓名</td><td>密码</td><td>部门编号</td><td>操作</td></tr>");
                 for(var i in data){
                   //给表格中添加数据
                   $("#dataTable").append("<tr><td>"
                   +data[i].eid+"</td><td>"
                   +data[i].ename+"</td><td>"
                   +data[i].epass+"</td><td>"
                   +data[i].dept.dname+"</td><td><a href='EmpServlet?tag=del&eid="+data[i].eid+"'>删除</a></td></tr>");
                 }
               });
             });

数据表格的代码：

<table border="1" id="dataTable">
           <tr>
             <td>编号</td>
             <td>姓名</td>
             <td>密码</td>
             <td>部门名称</td>
          <td>操作</td>
           </tr>
           <c:forEach items="${empList }" var="emp">
             <tr>
               <td>${emp.eid }</td>
               <td>${emp.ename }</td>
               <td>${emp.epass}</td>
               <td>${emp.dept.dname}</td>
            <td>
              <a href="EmpServlet?tag=del&eid=${emp.eid }">删除</a>
            </td>
             </tr>  
           </c:forEach>
         </table>

Servlet类中关键代码：

//根据部门编号查询信息
      public void getEmpByEdid(HttpServletRequest request, HttpServletResponse response) throws IOException{
        Integer edid = Integer.parseInt(request.getParameter("edid"));
        List<Emp> emplist = empService.findEmpByDid(edid);
        String jsonresult = JSON.toJSONString(emplist);
        System.out.println(jsonresult);
        PrintWriter out = response.getWriter();
        out.print(jsonresult);
      }

基本思路就是这样的，怎么样，是不是很简单？

需要辣椒酱的可以在小商店中直接下单哦~

![format_png 5][]

**往期精彩**

[相比学习好的学生，老师最喜欢努力认真学习的学生][Link 1]

[2020-12-12][Link 1]

[![format_png 6][] ][Link 1]

[小课堂？小视频？小商店？][Link 2]

[2020-12-11][Link 2]

[![format_png 7][] ][Link 2]

[什么样的事才是有意义的][Link 3]

[2020-12-10][Link 3]

[![format_png 8][] ][Link 3]

[如何实现省市关联的下拉列表][Link 4]

[2020-12-09][Link 4]

[![format_png 9][] ][Link 4]

![format_png 10][]

![format_png 11][]

点分享

![format_png 12][]

点点赞

![format_png 13][]

点在看

[format_png]: /images/20221120/c8a3b53d72884f7db1637e11a73174ff.png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9EWjlUaWF4ZFF4azBCdUtIM1Q0WTNpYmxIWmliZzlUTHJCb0F4WnB0eEg5WDMyNzk3WkRmbUF1ZmljV25MZUlUcWZpY01hTG5xMHV0ZmliekdVcWY1NGRaNmZZZy82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9EWjlUaWF4ZFF4azBCdUtIM1Q0WTNpYmxIWmliZzlUTHJCb1FSN1FWZ2wzanVSY0pqUnFpYUNTdzZWQW5DcUpZZEl6TTRLV3I3VXZaTkFBUUxROVN3MWNmWUEvNjQw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9EWjlUaWF4ZFF4azBCdUtIM1Q0WTNpYmxIWmliZzlUTHJCb3N2RXRidFdETWgxV1BzVU9zRlNjMGcwRzkzbHRoaWFzRDkwc0U2THVGbWpxOFFFaGJ6aWF2R1dRLzY0MA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9EWjlUaWF4ZFF4azBCdUtIM1Q0WTNpYmxIWmliZzlUTHJCb3REUm5HN25MU0tlZjhTNm5velVTcWNTWXRHUmxvS2U3MW1HRG5xQjVlTGRBVlFjcm53V1BOUS82NDA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9EWjlUaWF4ZFF4azBhSXpCUjVDOWljbTZraWFCSU1DZFFzRkp5VEZpY2J3WVczbHVCektSbFV1aWNVVUh1RER0V0FadkRxSWF1VnUxZEYzWmMxRFM5MUhqdXJ3LzY0MA?x-oss-process=image/format,png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe0ffa0f869e9be23d96d56dc785ca4159b2ed6d78623403b5b70be5f908585688fa63ce4&idx=1&mid=2247498270&scene=21&sn=5a90b23e07d0018a8f64f2b54916960e#wechat_redirect
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9EWjlUaWF4ZFF4azBhSXpCUjVDOWljbTZraWFCSU1DZFFzRmFRa2VGUXpiakkwQzFwOWx6bENURXMxbzhtTjFpYzdMTWlhdHRpY2pJdzVmVTlraWJrQWZydnd3b0EvNjQw?x-oss-process=image/format,png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe0e4a0f869f27bf061d9da7ca526b3ecc5a8d3c2260c5d32fc63cc54263af722cac307ed&idx=1&mid=2247498245&scene=21&sn=bb17fef237faac68fd75e35772399fae#wechat_redirect
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9EWjlUaWF4ZFF4azNHTnJENndFTnVXTEk2bW1DOHZFYXRJb3VhOFdrSm91TVdaMU5vMU1pYXNuenROU1U3bHliSzJPaG9VZzRnRWtHTE00OTBoVUdVOXBBLzY0MA?x-oss-process=image/format,png
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe317a0f86a0183a186b247b7abe51a5441c4128d822acace3fdfe8bb6b42b9545a74fe4f&idx=1&mid=2247498230&scene=21&sn=8b97f55e8e3fa136cec64c868c64c636#wechat_redirect
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9EWjlUaWF4ZFF4azB2SEtXR1AyQzRrRXUxNlIzN3JUTkFVTHdFU0V0cFlSaFJQSjlWWjNBc2V2SkNsb3h1QkFER2ZHeDVOVGp6YjVsVHlwb2lhRkZOWEZRLzY0MA?x-oss-process=image/format,png
[Link 4]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe311a0f86a0779236c3d02a41a15ccb43daa35b069bdd5701907379b1d52524446e6e33c&idx=1&mid=2247498224&scene=21&sn=4190aa6b708ef93eed46a3067266ad06#wechat_redirect
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9EWjlUaWF4ZFF4azFlS2VpYkQ3TTNHZzcyRElLN3B3RFRPSzVCNEZ0bGRMSW1ySEJsd2ljaWIxbDFwUTRpYnVUMXpjbm9LMzRZQUM2d01CM2xNZnR0dXhrZGlhdy82NDA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9EWjlUaWF4ZFF4azBGcWJjaWNLTXJlSUxrN3EwdldXc0pyTXpIaE5sZXppYzJXc3B2UjdUSzBEcEo4UnJjTXFjRDEzWU5jTDk0ekhzdktvemljeFZZWElNencvNjQw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9EWjlUaWF4ZFF4azFPclNvckhkaWM4dlRXMmVWbFpSUzVaOGUxcUJpY2xGMEo3UzE1WmgzOEtzejRlTWliaWJzQVl4ajF5ZEZrNmliQlBBdFN3c3BpYjVETmliMUZRLzY0MA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9EWjlUaWF4ZFF4azFPclNvckhkaWM4dlRXMmVWbFpSUzVaZE1rWUVJUTY4bWF6YWxLTkxZUFdtWDZ0Y2d2RjZpYjhnZ3pxMTVNUER5aWFaR3hxeGxSaWJNMDhnLzY0MA?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9EWjlUaWF4ZFF4azFPclNvckhkaWM4dlRXMmVWbFpSUzVaRTVpY3RyS0JvYWlid0l4aWNack11RE9YM0J6c0dPaExMWWdqMFM1NHVITGliREt2VGZqbktGOE9xQS82NDA?x-oss-process=image/format,png