大家好，我是雄雄，今天分享的技術(shù)很簡單，即ajax結(jié)合jdbc動態(tài)實(shí)現(xiàn)及時刷新表單數(shù)據(jù)。

前言：相信大家在網(wǎng)上沖浪的時候，肯定會發(fā)現(xiàn)這樣的場景，在實(shí)現(xiàn)某個查詢功能時，下方表格中會顯示需要展示的結(jié)果，當(dāng)查詢條件換掉之后，數(shù)據(jù)表格中顯示的信息也會及時更新，今天，我們就來實(shí)現(xiàn)一下這樣的功能。

效果圖如下所示：

數(shù)據(jù)庫：mysql

開發(fā)編輯器：myeclipse

瀏覽器：chrome

采用java三層架構(gòu)分層開發(fā)，首先我們先來看看數(shù)據(jù)庫的表結(jié)構(gòu)：

Emp表：

Dept表：

接下來就是按照表結(jié)構(gòu)寫實(shí)體類，代碼如下：

Emp實(shí)體類：

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實(shí)體類：

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(){}}

連接數(shù)據(jù)庫所需的BaseDao：

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(){}}

接著，就是Dao層接口，IEmpDao：

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(){}}

接口實(shí)現(xiàn)類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();@Overridepublic?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;}//查詢?nèi)?#64;Overridepublic?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 blocke.printStackTrace();}finally{base.closeConn(conn, p, rs);}return?eList;}@Overridepublic?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;}@Overridepublic?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 blocke.printStackTrace();}finally{base.closeConn(conn, p, rs);}return?emp;}//根據(jù)部門編號查詢@Overridepublic?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層實(shí)現(xiàn)類：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();@Overridepublic?int?addEmp(Emp emp)?{return?empDao.addEmp(emp);}@Overridepublic?List<Emp> findEmpAll()?{// TODO Auto-generated method stubreturn?empDao.findEmpAll();}@Overridepublic?int?delEmp(int?eid)?{// TODO Auto-generated method stubreturn?empDao.delEmp(eid);}@Overridepublic?Emp findEmpByName(String name)?{// TODO Auto-generated method stubreturn?empDao.findEmpByName(name);}@Overridepublic?List<Emp> findEmpByDid(int?edid)?{return?empDao.findEmpByDid(edid);}}

主要內(nèi)容在前臺jsp頁面，我們先來寫一個下拉列表，用來存放Dept表中的所有部門名稱，當(dāng)加載該jsp頁面時，先從數(shù)據(jù)庫中查詢所有部門名稱，然后通過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);%>部門編號：<!-- <input type="text" name="edid"/> --><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="查詢"/>

當(dāng)點(diǎn)擊查詢按鈕時，通過ajax去Servlet中，根據(jù)部門編號查詢員工信息，在回調(diào)函數(shù)（success）中處理返回的json數(shù)據(jù)，遍歷動態(tài)添加至表格中。

“查詢”按鈕 的點(diǎn)擊事件：

//點(diǎn)擊查詢查詢值$("#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){//給表格中添加數(shù)據(jù)$("#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>");}});});

數(shù)據(jù)表格的代碼：

<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類中關(guān)鍵代碼：

//根據(jù)部門編號查詢信息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);}

基本思路就是這樣的，怎么樣，是不是很簡單？

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

往期精彩

相比學(xué)習(xí)好的學(xué)生，老師最喜歡努力認(rèn)真學(xué)習(xí)的學(xué)生

2020-12-12

小課堂？小視頻？小商店？

2020-12-11

什么樣的事才是有意義的

2020-12-10

如何實(shí)現(xiàn)省市關(guān)聯(lián)的下拉列表

2020-12-09

點(diǎn)分享

點(diǎn)點(diǎn)贊

點(diǎn)在看

總結(jié)

以上是生活随笔為你收集整理的Ajax实现动态及时刷新表格数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。