springboot+spring+spring+mybatis+ajxa(ssmaboot)

pom.xml

[html]  view plain  copy

1. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">  
2.       
3.      <parent>  
4.         <groupId>org.springframework.boot</groupId>  
5.         <artifactId>spring-boot-starter-parent</artifactId>  
6.         <version>1.5.4.RELEASE</version>  
7.     </parent>  
8.     <dependencies>  
9.         <!-- 表示可以发布web程序 自动启动一个tomcat -->  
10.         <dependency>  
11.             <groupId>org.springframework.boot</groupId>  
12.             <artifactId>spring-boot-starter-web</artifactId>  
13.         </dependency>  
14.         <!-- 集成mybatis -->  
15.         <dependency>  
16.           <groupId>org.mybatis.spring.boot</groupId>  
17.           <artifactId>mybatis-spring-boot-starter</artifactId>  
18.           <version>1.2.1</version>  
19.         </dependency>  
20.         <!-- 自动监听配置文件和jsp -->  
21.         <dependency>  
22.             <groupId>org.springframework.boot</groupId>  
23.             <artifactId>spring-boot-devtools</artifactId>  
24.             <optional>true</optional>  
25.         </dependency>  
26.         <!-- 添加转译jsp的jar -->  
27.         <dependency>  
28.             <groupId>org.springframework.boot</groupId>  
29.             <artifactId>spring-boot-starter-tomcat</artifactId>  
30.             <scope>provided</scope>  
31.         </dependency>  
32.         <dependency>  
33.             <groupId>org.apache.tomcat.embed</groupId>  
34.             <artifactId>tomcat-embed-jasper</artifactId>  
35.             <scope>provided</scope>  
36.         </dependency>  
37.           
38.         <!-- 配置本地的jar -->  
39.         <dependency>  
40.              <groupId>ojdbc</groupId>  
41.               <artifactId>objdc1</artifactId>  
42.              <version>3.2.8</version>  
43.             <scope>system</scope>  
44.             <systemPath>C:\app\Administrator\product\11.2.0\dbhome_1\jdbc\lib\ojdbc6.jar</systemPath>  
45.         </dependency>  
46.         <!-- 添加数据源 -->  
47.          <dependency>    
48.                 <groupId>commons-dbcp</groupId>    
49.                 <artifactId>commons-dbcp</artifactId>    
50.         </dependency>    
51.           
52.     </dependencies>  
53.       
54.   <modelVersion>4.0.0</modelVersion>  
55.   <groupId>cn.et</groupId>  
56.   <artifactId>ssmaboot</artifactId>  
57.   <version>0.0.1-SNAPSHOT</version>  
58. </project>  

application.properties 

连接四要素

[html]  view plain  copy

1. mysource.url=jdbc:oracle:thin:localhost:1521:orcl  
2. mysource.username=scott  
3. mysource.password=tiger  
4. mysource.driverClassName=oracle.jdbc.OracleDriver  

controller

[java]  view plain  copy

1. package cn.et.day20170606.controller;  
2.   
3. import java.io.IOException;  
4. import java.io.OutputStream;  
5. import java.util.List;  
6.   
7. import org.springframework.beans.factory.annotation.Autowired;  
8. import org.springframework.web.bind.annotation.RequestMapping;  
9. import org.springframework.web.bind.annotation.RestController;  
10.   
11. import cn.et.day20170606.entity.EmpEntity;  
12. import cn.et.day20170606.service.EmpJaxaService;  
13. import cn.et.day20170606.utils.PagingEntity;  
14.   
15. /** 
16.  *  
17.  * @RestController 目标就是配置 
18.  *     消息转换器  jackson 
19.  *        在action上添加 @ResponseBody 
20.  * 没有ajax（无刷新）可以用Controller 
21.  * @author Administrator 
22.  *http://localhost:8080/day0606/queryEmp 
23.  */  
24. /** 
25.  * 用ajax就要用这个注解@RestController 
26.  */  
27. @RestController  
28. @RequestMapping(value="/day0609")  
29. public class EmpJaxaAction {  
30.     @Autowired  
31.     private EmpJaxaService empService;  
32.     /** 
33.      *查询数据库的分页数据方法 
34.      */  
35.     @RequestMapping(value="/queryPaginEmp")  
36.     public  PagingEntity queryPagingEmp(Integer pagin,String ename){  
37.         return empService.queryPaginEmp(ename, pagin);  
38.     }  
39.       
40.     /** 
41.      *查询数据库的数据方法 
42.      */  
43.     @RequestMapping(value="/queryEmp")  
44.     public  List queryEmp(String ename){  
45.         return empService.queryEmp(ename);  
46.     }  
47.     /** 
48.      *新增数据库的数据方法 
49.      *成功返回1 失败返回0 
50.      * @throws IOException  
51.      */  
52.     @RequestMapping(value="/insertEmp")  
53.     public void insertEmp(EmpEntity emp,OutputStream os) throws IOException{  
54.           
55.         try{  
56.             empService.insertEmp(emp);  
57.             os.write("1".getBytes());  
58.         }catch (Exception e) {  
59.             os.write("0".getBytes());  
60.         }  
61.           
62.     }  
63.     /** 
64.      *更新数据库的数据方法 
65.      * @throws IOException  
66.      */  
67.     @RequestMapping(value="/updateEmp")  
68.     public void updateEmp(EmpEntity emp,OutputStream os) throws IOException{  
69.         try{  
70.             empService.updateEmp(emp);  
71.             os.write("1".getBytes());  
72.         }catch (Exception e) {  
73.             os.write("0".getBytes());  
74.         }  
75.           
76.     }  
77.     /** 
78.      * 删除数据库数据的方法 
79.      * @throws IOException  
80.      */  
81.     @RequestMapping(value="/deleteEmp")  
82.     public void deleteEmp(String empno,OutputStream os) throws IOException{  
83.         try{  
84.             empService.deleteEmp(empno);  
85.             os.write("1".getBytes());  
86.         }catch (Exception e) {  
87.             os.write("0".getBytes());  
88.         }  
89.           
90.     }  
91. }  

[java]  view plain  copy

1. Service（分页的实体类以前的文章有）  

[java]  view plain  copy

1. package cn.et.day20170606.service.impl;  
2.   
3. import java.util.List;  
4. import java.util.Map;  
5.   
6. import org.springframework.beans.factory.annotation.Autowired;  
7. import org.springframework.stereotype.Service;  
8.   
9. import cn.et.day20170606.dao.EmpJaxaDao;  
10. import cn.et.day20170606.entity.EmpEntity;  
11. import cn.et.day20170606.service.EmpJaxaService;  
12. import cn.et.day20170606.utils.Calculate;  
13. import cn.et.day20170606.utils.PagingEntity;  
14.   
15.   
16. @Service  
17. public class EmpJaxaServiceImpl implements EmpJaxaService {  
18.     @Autowired  
19.     private EmpJaxaDao empDao;  
20.     /** 
21.      *调用查询数据库的数据方法 
22.      */  
23.     public List<EmpEntity> queryEmp(String ename){  
24.         return empDao.queryEmp(ename);  
25.     }  
26.     /** 
27.      *调用新增数据库的数据方法 
28.      */  
29.     public void insertEmp(EmpEntity emp){  
30.         empDao.insertEmp(emp);  
31.     }  
32.     /** 
33.      *调用更新数据库的数据方法 
34.      */  
35.     public void updateEmp(EmpEntity emp){  
36.         empDao.updateEmp(emp);  
37.     }  
38.     /** 
39.      * 调用删除数据库数据的方法 
40.      */  
41.     public void deleteEmp(String empno){  
42.         empDao.deleteEmp(empno);  
43.     }  
44.     /** 
45.      *查询数据库的分页数据方法 
46.      */  
47.     public PagingEntity queryPaginEmp(String ename,Integer current) {  
48.         if(ename==null){  
49.             ename="";  
50.         }  
51.         int sum=empDao.queryTotalEmp(ename);  
52.         PagingEntity p=Calculate.calculate(current, 5, sum);  
53.         List list=empDao.queryPaginEmp(ename,p.getStart(),p.getEnd());  
54.         p.setList(list);  
55.         return p;  
56.     }  
57.   
58. }  

用于管理事物

[java]  view plain  copy

1. package cn.et.day20170606.service;  
2.   
3. import java.util.List;  
4. import java.util.Map;  
5.   
6. import org.springframework.transaction.annotation.Transactional;  
7.   
8. import cn.et.day20170606.entity.EmpEntity;  
9. import cn.et.day20170606.utils.PagingEntity;  
10. /** 
11.  * 查询事物用只读  
12.  * @author Administrator 
13.  * 
14.  */  
15. @Transactional  
16. public interface EmpJaxaService {  
17.     /** 
18.      *查询数据库的数据方法 
19.      */  
20.     @Transactional(readOnly=true)  
21.     public List<EmpEntity> queryEmp(String ename);  
22.     /** 
23.      *新增数据库的数据方法 
24.      */  
25.       
26.     public void insertEmp(EmpEntity emp);  
27.     /** 
28.      *更新数据库的数据方法 
29.      */  
30.     public void updateEmp(EmpEntity emp);  
31.     /** 
32.      * 删除数据库数据的方法 
33.      */  
34.     public void deleteEmp(String empno);  
35.     /** 
36.      *查询数据库的分页数据方法 
37.      */  
38.     @Transactional(readOnly=true)  
39.     public PagingEntity queryPaginEmp(String ename,Integer pagin);  
40. }  

dao

[java]  view plain  copy

1. package cn.et.day20170606.dao.impl;  
2.   
3. import java.io.IOException;  
4. import java.util.List;  
5. import java.util.Map;  
6.   
7. import org.springframework.beans.factory.annotation.Autowired;  
8. import org.springframework.stereotype.Repository;  
9.   
10. import cn.et.day20170606.dao.EmpJaxaDao;  
11. import cn.et.day20170606.dao.mapper.EmpMybatiesMapper;  
12. import cn.et.day20170606.entity.EmpEntity;  
13.   
14. @Repository  
15. public class EmpJaxaDaoImpl implements EmpJaxaDao{  
16.     @Autowired  
17.     private EmpMybatiesMapper empMybatiesMapper;  
18.     /** 
19.      *查询数据库的数据方法 
20.      * @throws IOException  
21.      * @throws IOException  
22.      */  
23.     public List<EmpEntity> queryEmp(String ename){  
24.         return empMybatiesMapper.queryEmp(ename);  
25.     }  
26.     /** 
27.      *新增数据库的数据方法 
28.      * @throws IOException  
29.      */  
30.     public void insertEmp(EmpEntity emp){  
31.         empMybatiesMapper.insertEmp(emp);  
32.     }  
33.     /** 
34.      *更新数据库的数据方法 
35.      * @throws IOException  
36.      */  
37.     public void updateEmp(EmpEntity emp){  
38.         empMybatiesMapper.updateEmp(emp);  
39.     }  
40.     /** 
41.      * 删除数据库数据的方法 
42.      * @throws IOException  
43.      * @throws IOException  
44.      */  
45.     public void deleteEmp(String empno){  
46.         empMybatiesMapper.deleteEmp(empno);  
47.     }  
48.     /** 
49.      *查询数据库的分页数据方法 
50.      *注意结束位置再前面   开始位置再后面 
51.      * @throws IOException  
52.      */  
53.     public List<EmpEntity> queryPaginEmp(String ename, int start,  
54.             int end){  
55.         return empMybatiesMapper.queryPaginEmp(ename, end, start);  
56.     }  
57.     /** 
58.      *查询数据库的总数方法 
59.      * @throws IOException  
60.      */  
61.     public int queryTotalEmp(String ename){  
62.         return empMybatiesMapper.queryTotalEmp(ename);  
63.     }  
64. }  

[java]  view plain  copy

1. package cn.et.day20170606.dao;  
2.   
3. import java.io.IOException;  
4. import java.util.List;  
5. import java.util.Map;  
6.   
7. import cn.et.day20170606.entity.EmpEntity;  
8.   
9. public interface EmpJaxaDao {  
10.     /** 
11.      *查询数据库的数据方法 
12.      */  
13.     public List<EmpEntity> queryEmp(String ename);  
14.     /** 
15.      *查询数据库的分页数据方法 
16.      */  
17.     public List queryPaginEmp(String ename,int start,int end);  
18.     /** 
19.      *查询数据库的总数方法 
20.      */  
21.     public int queryTotalEmp(String ename);  
22.     /** 
23.      *新增数据库的数据方法 
24.      */  
25.     public void insertEmp(EmpEntity emp);  
26.     /** 
27.      *更新数据库的数据方法 
28.      */  
29.     public void updateEmp(EmpEntity emp);  
30.     /** 
31.      * 删除数据库数据的方法 
32.      */  
33.     public void deleteEmp(String empno);  
34. }  

mybatis 的mapper

[java]  view plain  copy

1. package cn.et.day20170606.dao.mapper;  
2.   
3. import java.util.List;  
4. import java.util.Map;  
5.   
6. import org.apache.ibatis.annotations.Delete;  
7. import org.apache.ibatis.annotations.Insert;  
8. import org.apache.ibatis.annotations.Mapper;  
9. import org.apache.ibatis.annotations.Param;  
10. import org.apache.ibatis.annotations.Select;  
11. import org.apache.ibatis.annotations.Update;  
12. import org.springframework.transaction.annotation.Transactional;  
13.   
14. import cn.et.day20170606.entity.EmpEntity;  
15.   
16. @Mapper  
17. public interface EmpMybatiesMapper {  
18.     /** 
19.      *查询数据库的数据方法 
20.      */  
21.     @Select(value="select empno,ename,job,mgr,to_char(hiredate,'yyyy-mm-dd') as hiredate,sal,comm,deptno from emp where nvl(ename,' ') like '%'||#{ename}||'%'")  
22.     public List<EmpEntity> queryEmp(@Param(value="ename")String ename);  
23.     /** 
24.      *查询数据库的分页数据方法 
25.      */  
26.     @Select(value="select * from (select empno,ename,job,mgr,to_char(hiredate,'yyyy-mm-dd') as hiredate,sal,comm,deptno,rownum rn from emp where nvl(ename,' ') like '%'||#{ename}||'%') where rn<=#{start} and rn>=#{end}")  
27.     public List<EmpEntity> queryPaginEmp(@Param(value="ename")String ename,@Param(value="start")int start,@Param(value="end")int end);  
28.     /** 
29.      *查询数据库的总数方法 
30.      */  
31.     @Select("select count(rowid) as CT from emp where nvl(ename,' ') like '%'||#{ename}||'%'")  
32.     public int queryTotalEmp(@Param(value="ename")String ename);  
33.     /** 
34.      *新增数据库的数据方法 
35.      */  
36.     @Insert(value="insert into emp values((select nvl(max(empno),0)+10 from emp),#{emp.ename},#{emp.job},#{emp.mgr},to_date(#{emp.hiredate},'yyyy-mm-dd'),#{emp.sal},#{emp.comm},#{emp.deptno})")  
37.     public void insertEmp(@Param(value="emp")EmpEntity emp);  
38.     /** 
39.      *更新数据库的数据方法 
40.      */  
41.     @Update(value="update emp set ename=#{emp.ename},job=#{emp.job},mgr=#{emp.mgr},hiredate=to_date(#{emp.hiredate},'yyyy-mm-dd'),sal=#{emp.sal},comm=#{emp.comm},deptno=#{emp.deptno} where empno=#{emp.empno}")  
42.     public void updateEmp(@Param(value="emp")EmpEntity emp);  
43.     /** 
44.      * 删除数据库数据的方法 
45.      */  
46.     @Delete(value="delete from emp where empno=#{empno}")  
47.     public void deleteEmp(@Param(value = "empno") String empno);  
48.       
49. }  

entity

[java]  view plain  copy

1. package cn.et.day20170606.entity;  
2.   
3. /** 
4.  * 数据库的数据类 （一个对象就是数据库的一行） 
5.  * @author Administrator 
6.  * 
7.  */  
8. public class EmpEntity {  
9.         private String empno;  
10.         private String ename;  
11.         private String job;  
12.         private String mgr;  
13.         private String hiredate;  
14.         private String sal;  
15.         private String comm;  
16.         private String deptno;  
17.         public String getEmpno() {  
18.             return empno;  
19.         }  
20.         public void setEmpno(String empno) {  
21.             this.empno = empno;  
22.         }  
23.         public String getEname() {  
24.             return ename;  
25.         }  
26.         public void setEname(String ename) {  
27.             this.ename = ename;  
28.         }  
29.         public String getJob() {  
30.             return job;  
31.         }  
32.         public void setJob(String job) {  
33.             this.job = job;  
34.         }  
35.         public String getMgr() {  
36.             return mgr;  
37.         }  
38.         public void setMgr(String mgr) {  
39.             this.mgr = mgr;  
40.         }  
41.         public String getHiredate() {  
42.             return hiredate;  
43.         }  
44.         public void setHiredate(String hiredate) {  
45.             this.hiredate = hiredate;  
46.         }  
47.         public String getSal() {  
48.             return sal;  
49.         }  
50.         public void setSal(String sal) {  
51.             this.sal = sal;  
52.         }  
53.         public String getComm() {  
54.             return comm;  
55.         }  
56.         public void setComm(String comm) {  
57.             this.comm = comm;  
58.         }  
59.         public String getDeptno() {  
60.             return deptno;  
61.         }  
62.         public void setDeptno(String deptno) {  
63.             this.deptno = deptno;  
64.         }  
65.           
66. }  

dataSoure

[java]  view plain  copy

1. package cn.et.day20170606.utils;  
2.   
3.   
4.   
5. import javax.sql.DataSource;  
6.   
7. import org.apache.commons.dbcp.BasicDataSource;  
8. import org.springframework.boot.context.properties.ConfigurationProperties;  
9. import org.springframework.context.annotation.Bean;  
10. import org.springframework.context.annotation.Configuration;  
11.   
12. /** 
13.  * 相当于标示 该类是一个bean的容器 
14.  * @author Administrator 
15.  *  @Configuration 标示这个类用来创建bean的 
16.  */  
17. @Configuration  
18. public class BeanContainer {  
19.     /** 
20.      * 表示调用该方法产生一个bean 
21.      * 方法名是bean的id 
22.      * 用这个数据源覆盖默认的 
23.      * @return 
24.      */  
25.   
26.     @ConfigurationProperties(prefix="mysource")  
27.     @Bean  
28.     public DataSource dataSource(){  
29.         BasicDataSource dataSource=new BasicDataSource();  
30.         return dataSource;  
31.     }  
32. }  

入口

[java]  view plain  copy

1. package cn.et.day20170606;  
2.   
3. import org.springframework.boot.SpringApplication;  
4. import org.springframework.boot.autoconfigure.SpringBootApplication;  
5. import org.springframework.transaction.annotation.EnableTransactionManagement;  
6. /** 
7.  * 自动添加 spring.xml文件 并且配置 自动扫描 
8.  * 自动添加web.xml 同时 在web.xml 配置过滤器 拦截器 
9.  * @EnableTransactionManagement 表示启动全局事务支持 
10.  */  
11. @EnableTransactionManagement  
12. @SpringBootApplication  
13. public class SampleController {  
14.     public static void main(String[] args) throws Exception {  
15.         SpringApplication.run(SampleController.class, args);  
16.     }  
17. }  

jsp

[html]  view plain  copy

1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
2. <html>  
3. <head>  
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
5.     <script type="text/javascript">  
6.             var path="${pageContext.request.contextPath}/day0609";  
7.             //根据id获取对象  
8.             function $(id){  
9.                 return document.getElementById(id);  
10.             }  
11.             //和div赋值  
12.             function toUpdate(empno,ename,job,mgr,hiredate,sal,comm,deptno){  
13.                 $('updateDiv').style.display='block';  
14.                 $('empNoId').value=empno;  
15.                 $('updateEname').value=(ename=='null'?'':ename);  
16.                 $('updateJob').value=(job=='null'?'':job);  
17.                 $('updateMgr').value=mgr;  
18.                 $('updateHiredate').value=(hiredate=='null'?'':hiredate);  
19.                 $('updateSal').value=sal;  
20.                 $('updateComm').value=comm;  
21.                 $('updateDeptno').value=deptno;  
22.                   
23.             }  
24.             /**  
25.                     封装ajax  
26.              **/  
27.              function sendAjax(method,url,callback,param){  
28.                 var xmlHttp=new XMLHttpRequest();  
29.                 //向服务器发出请求  
30.                 //规定请求的类型、URL 以及是否异步处理请求。  
31.                 //method：请求的类型；GET 或 POST  
32.                 //url：文件在服务器上的位置  
33.                 //async：true（异步）或 false（同步）  
34.                 xmlHttp.open(method,url,true);  
35.                 //设置响应的回调 当后台的json返回后 自动调用xhr.onreadystatechange指定的函数  
36.                 xmlHttp.onreadystatechange=function(){   
37.                    if(xmlHttp.readyState==4 && xmlHttp.status==200){  
38.                         //成功后调用第三个函数  
39.                      callback(xmlHttp.responseText);  
40.                    }  
41.                  }  
42.                  //post 在send里面带参数 get直接带 post一定要设置setRequestHeader  
43.                  if(method=="POST"){  
44.                     xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
45.                     xmlHttp.send(param);  
46.                  }else{  
47.                     xmlHttp.send();  
48.                  }  
49.                   
50.              }  
51.             //和action交互的方法 用于更新  
52.             function toUpdate1(){  
53.                 document.getElementById('updateDiv').style.display='none'  
54.                   
55.                   
56.                 var empno=$('empNoId').value;  
57.                 var ename=$('updateEname').value;  
58.                 var job=$('updateJob').value;  
59.                 var mgr=$('updateMgr').value;  
60.                 var hiredate=$('updateHiredate').value;  
61.                 var sal=$('updateSal').value;  
62.                 var comm=$('updateComm').value;  
63.                 var deptno=$('updateDeptno').value;  
64.                 //参数  
65.                 var param="ename="+ename+"&job="+job+"&mgr="+mgr+"&hiredate="+hiredate+"&sal="+sal+"&comm="+comm+"&deptno="+deptno+"&empno="+empno  
66.                 //调用ajax好action交互  
67.                 sendAjax("POST",path+"/updateEmp",function(message){  
68.                     if(message==1){  
69.                             alert("操作成功");  
70.                             toQuery(current);  
71.                     }else{  
72.                         alert("操作失败");  
73.                     }  
74.                 },param)  
75.             }  
76.             //和action交互的方法 用于新增  
77.             function toAdd(){  
78.                 document.getElementById('addDiv').style.display='none'  
79.                 var xmlHttp=new XMLHttpRequest();  
80.                 var ename=$('a1').value;  
81.                 var job=$('a2').value;  
82.                 var mgr=$('a3').value;  
83.                 var hiredate=$('a4').value;  
84.                 var sal=$('a5').value;  
85.                 var comm=$('a6').value;  
86.                 var deptno=$('a7').value;  
87.                 var param="ename="+ename+"&job="+job+"&mgr="+mgr+"&hiredate="+hiredate+"&sal="+sal+"&comm="+comm+"&deptno="+deptno;  
88.                 sendAjax("POST",path+"/insertEmp",function(message){  
89.                     if(message==1){  
90.                             alert("操作成功");  
91.                             toQuery(current);  
92.                     }else{  
93.                         alert("操作失败");  
94.                     }  
95.                 },param)              
96.             }  
97.             //和action交互的方法 用于删除  
98.             function toDelete(empno){  
99.                 var param="empno="+empno;  
100.                 sendAjax("POST",path+"/deleteEmp",function(message){  
101.                     if(message==1){  
102.                             alert("操作成功");  
103.                             toQuery(current);  
104.                     }else{  
105.                         alert("操作失败");  
106.                     }  
107.                 },param)      
108.             }  
109.             //分页的一些参数  
110.             var current=1;  
111.             var sum=0;  
112.             var trail=0;  
113.             var last=0;  
114.             var next=0;  
115.             和action交互的方法 用于查询  
116.             function toQuery(pagin){  
117.                 var xmlHttp=new XMLHttpRequest();  
118.                 var tb=$("tb");  
119.                 var td=$("td");  
120.                 var ename=$("ename").value;  
121.                 xmlHttp.open("GET",path+"/queryPaginEmp?ename="+ename+"&pagin="+pagin,true);  
122.                 xmlHttp.onreadystatechange=function(){  
123.                     if(xmlHttp.readyState==4&&xmlHttp.status==200){  
124.                         //获取action响应的内容  
125.                         var json=xmlHttp.responseText;  
126.                         //把它转成json对象  
127.                         var jsonall=JSON.parse(json);  
128.                         //给分页的一些参数赋值  
129.                         current=jsonall.current;  
130.                         sum=jsonall.sum;  
131.                         trail=jsonall.trail;  
132.                         last=jsonall.last;  
133.                         next=jsonall.next;  
134.                         $("p1").innerHTML=current;  
135.                         $("p2").innerHTML=trail;  
136.                         $("p3").innerHTML=sum;  
137.                         var jsonObj=jsonall.list;  
138.                         //无刷新在此查询的时候把整个tbody删除  
139.                         tb.removeChild(td);  
140.                         var tdRow=document.createElement("tbody");  
141.                         tdRow.setAttribute("id","td");  
142.                         //把tbody加到table里面去  
143.                         tb.appendChild(tdRow);  
144.                         for ( var i = 0; i < jsonObj.length; i++) {  
145.                             var el = jsonObj[i];  
146.                             //创建节点  
147.                             var trRow=document.createElement("tr");  
148.                             var tdRow1=document.createElement("td");  
149.                             var tdRow2=document.createElement("td");  
150.                             var tdRow3=document.createElement("td");  
151.                             var tdRow4=document.createElement("td");  
152.                             var tdRow5=document.createElement("td");  
153.                             var tdRow6=document.createElement("td");  
154.                             var tdRow7=document.createElement("td");  
155.                             var tdRow8=document.createElement("td");  
156.                             var tdRow9=document.createElement("td");  
157.                             tdRow1.innerHTML=el.empno;  
158.                             tdRow2.innerHTML=el.ename;  
159.                             tdRow3.innerText=el.job;  
160.                             tdRow4.innerText=el.mgr;  
161.                             tdRow5.innerHTML=el.hiredate;  
162.                             tdRow6.innerHTML=el.sal;  
163.                             tdRow7.innerHTML=el.comm;  
164.                             tdRow8.innerHTML=el.deptno;  
165.                             tdRow9.innerHTML="<button οnclick='toDelete("+el.empno+")'>删除</button><button onclick=toUpdate("+el.empno+",'"+el.ename+"','"+el.job+"',"+  
166.                             el.mgr+",'"+el.hiredate+"',"+el.sal+","+el.comm+","+el.deptno+")>更新</button>";  
167.                             //把节点tdRow1加到trRow  
168.                             trRow.appendChild(tdRow1);  
169.                             trRow.appendChild(tdRow2);  
170.                             trRow.appendChild(tdRow3);  
171.                             trRow.appendChild(tdRow4);  
172.                             trRow.appendChild(tdRow5);  
173.                             trRow.appendChild(tdRow6);  
174.                             trRow.appendChild(tdRow7);  
175.                             trRow.appendChild(tdRow8);  
176.                             trRow.appendChild(tdRow9);  
177.                             tdRow.appendChild(trRow);  
178.                         }  
179.                     }  
180.                 }  
181.                 xmlHttp.send();  
182.             }  
183.         </script>  
184.     </head>  
185. <body onload="toQuery(1)">  
186.     <!-- http://localhost:8080/day20170609/emp.jsp -->  
187.         ename<input type="text" name="ename" id="ename"/>  
188.         <input type="button" value="查询" onclick="toQuery(current)"/>  
189.         <input type="button" value="新增" onclick="document.getElementById('addDiv').style.display='block'"/><br/>  
190.           
191.         <table id="tb">  
192.             <thead>  
193.                 <tr>  
194.                     <td>empno</td>  
195.                     <td>ename</td>  
196.                     <td>job</td>  
197.                     <td>mgr</td>  
198.                     <td>hiredate</td>  
199.                     <td>sal</td>  
200.                     <td>comm</td>  
201.                     <td>deptno</td>  
202.                      <td>操作</td>  
203.                 </tr>  
204.             </thead >  
205.             <tbody id="td">  
206.                   
207.             </tbody>  
208.         </table>  
209.             <input type="image" src="${pageContext.request.contextPath}/day20170609/image/18.gif" onclick="toQuery(1)"/>  
210.             <input type="image" src="${pageContext.request.contextPath}/day20170609/image/20.gif" onclick="toQuery(last)"/>  
211.               当前<span id="p1"></span>页  总<span id="p2"></span>页  总:<span id="p3"></span>  
212.             <input type="image" src="${pageContext.request.contextPath}/day20170609/image/16.gif" onclick="toQuery(next)"/>  
213.             <input type="image" src="${pageContext.request.contextPath}/day20170609/image/14.gif" onclick="toQuery(trail)"/>  
214.         <!-- 新增的div-->  
215.         <div id="addDiv" style="display:none;position: absolute;left: 65%;top: 14%;width: 300px;height:200px;background:linear-gradient(to bottom,skyblue,gray);border: 1px solid black;">  
216.                 ENAME:<input type='text' name='ename' id='a1'>  
217.                 <br/>  
218.                 JOB:<input type='text' name='job' id='a2'>  
219.                 <br/>  
220.                 MGR:<input type='text' name='mgr' id='a3'>  
221.                 <br/>  
222.                 HIREDATE:<input type='text' name='hiredate' id='a4'>  
223.                 <br/>  
224.                 SAL:<input type='text' name='sal' id='a5'>  
225.                 <br/>  
226.                 COMM:<input type='text' name='comm' id='a6'>  
227.                 <br/>  
228.                 DEPTNO:<input type='text' name='deptno' id='a7'>  
229.                 <br/>  
230.                 <input type='button' value="新增"  onclick="toAdd()">  
231.                 <input type='button' value="关闭" onclick="document.getElementById('addDiv').style.display='none'">  
232.         </div>  
233.           
234.         <!-- 修改的div-->  
235.         <div id="updateDiv" style="display:none;position: absolute;left: 65%;top: 14%;width: 300px;height:200px;background:linear-gradient(to bottom,skyblue,gray);border: 1px solid black;">  
236.                 <input type='hidden' name='empno' id='empNoId'>  
237.                 ENAME: <input type='text' id="updateEname"  name='ename'>  
238.                 <br/>  
239.                 JOB: <input type='text' id="updateJob"  name='job'>  
240.                 <br/>  
241.                 MGR: <input type='text' id="updateMgr"  name='mgr'>  
242.                 <br/>  
243.                 HIREDATE: <input type='text' id="updateHiredate"  name='hiredate'>  
244.                 <br/>  
245.                 SAL: <input type='text' id="updateSal"  name='sal'>  
246.                 <br/>  
247.                 COMM: <input type='text' id="updateComm"  name='comm'>  
248.                 <br/>  
249.                 DEPTNO: <input type='text' id="updateDeptno"  name='deptno'>  
250.                 <br/>  
251.                 <input type='button' value='修改' onclick="toUpdate1()">  
252.                 <input type='button' value="关闭" onclick="document.getElementById('updateDiv').style.display='none'">  
253.         </div>  
254. </body>  
255. </html>