2、springboot+mybatis+ajax+pageHelper+idea+maven（全套增删改查）

0.构建项目

1、项目结构如下

2、编辑pom.xml文件配置依赖

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 3     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
 4     <modelVersion>4.0.0</modelVersion>
 5     <parent>
 6         <groupId>org.springframework.boot</groupId>
 7         <artifactId>spring-boot-starter-parent</artifactId>
 8         <version>2.7.3</version>
 9         <relativePath/> <!-- lookup parent from repository -->
10     </parent>
11     <groupId>com</groupId>
12     <artifactId>sbmxmlday5002</artifactId>
13     <version>0.0.1-SNAPSHOT</version>
14     <name>sbmxmlday5002</name>
15     <description>Demo project for Spring Boot</description>
16     <properties>
17         <java.version>1.8</java.version>
18     </properties>
19 
20     <dependencies>
21         <dependency>
22             <groupId>org.springframework.boot</groupId>
23             <artifactId>spring-boot-starter-jdbc</artifactId>
24         </dependency>
25         <dependency>
26             <groupId>org.springframework.boot</groupId>
27             <artifactId>spring-boot-starter-web</artifactId>
28         </dependency>
29         <dependency>
30             <groupId>org.mybatis.spring.boot</groupId>
31             <artifactId>mybatis-spring-boot-starter</artifactId>
32             <version>2.2.2</version>
33         </dependency>
34 
35         <dependency>
36             <groupId>mysql</groupId>
37             <artifactId>mysql-connector-java</artifactId>
38             <version>5.1.38</version>
39         </dependency>
40 
41         <!--spring boot 分页查询，需要手动配置 必须是1.4.1-->
42         <!-- pagehelper -->
43         <dependency>
44             <groupId>com.github.pagehelper</groupId>
45             <artifactId>pagehelper-spring-boot-starter</artifactId>
46             <version>1.4.1</version>
47         </dependency>
48 
49         <dependency>
50             <groupId>org.springframework.boot</groupId>
51             <artifactId>spring-boot-starter-test</artifactId>
52             <scope>test</scope>
53         </dependency>
54 
55     </dependencies>
56 
57     <build>
58         <plugins>
59             <plugin>
60                 <groupId>org.springframework.boot</groupId>
61                 <artifactId>spring-boot-maven-plugin</artifactId>
62             </plugin>
63         </plugins>
64     </build>
65 
66 </project>

pom.xml

3、在java目录下的com.pojo包下创建持久化类

 1 package com.pojo;
 2 import org.springframework.stereotype.Component;
 3 
 4 import java.io.Serializable;
 5 
 6 /**
 7  * 一方引用多方list集合
 8  */
 9 @Component
10 public class Dept implements Serializable {
11   private Integer deptno   ;
12   private String  dname    ;
13   private String  loc          ;
14 
15   public Dept() {
16   }
17 
18   public Dept(Integer deptno, String dname, String loc) {
19     this.deptno = deptno;
20     this.dname = dname;
21     this.loc = loc;
22   }
23 
24   public Integer getDeptno() {
25     return deptno;
26   }
27 
28   public void setDeptno(Integer deptno) {
29     this.deptno = deptno;
30   }
31 
32 
33   public String getDname() {
34     return dname;
35   }
36 
37   public void setDname(String dname) {
38     this.dname = dname;
39   }
40 
41 
42   public String getLoc() {
43     return loc;
44   }
45 
46   public void setLoc(String loc) {
47     this.loc = loc;
48   }
49 
50   @Override
51   public String toString() {
52     return "Dept{" +
53             "deptno=" + deptno +
54             ", dname='" + dname + '\'' +
55             ", loc='" + loc + '\'' +
56             '}';
57   }
58 }

Dept.java

  1 package com.pojo;
  2 
  3 import org.springframework.stereotype.Component;
  4 
  5 import java.io.Serializable;
  6 
  7 /**
  8  * 多方引用一方对象
  9  */
 10 @Component
 11 public class Emp  implements Serializable{
 12   private Integer empno             ;
 13   private String  ename           ;
 14   private String  job         ;
 15   private Integer mgr           ;
 16   private String  hiredate           ;
 17   private Double  sal         ;
 18   private Double  comm               ;
 19   private Dept dept;
 20 
 21 
 22   public Emp() {
 23   }
 24 
 25   public Emp(Integer empno, String ename, String job, Integer mgr, String hiredate, Double sal, Double comm, Dept dept) {
 26     this.empno = empno;
 27     this.ename = ename;
 28     this.job = job;
 29     this.mgr = mgr;
 30     this.hiredate = hiredate;
 31     this.sal = sal;
 32     this.comm = comm;
 33     this.dept = dept;
 34   }
 35 
 36   public Integer getEmpno() {
 37     return empno;
 38   }
 39 
 40   public void setEmpno(Integer empno) {
 41     this.empno = empno;
 42   }
 43 
 44 
 45   public String getEname() {
 46     return ename;
 47   }
 48 
 49   public void setEname(String ename) {
 50     this.ename = ename;
 51   }
 52 
 53 
 54   public String getJob() {
 55     return job;
 56   }
 57 
 58   public void setJob(String job) {
 59     this.job = job;
 60   }
 61 
 62 
 63   public Integer getMgr() {
 64     return mgr;
 65   }
 66 
 67   public void setMgr(Integer mgr) {
 68     this.mgr = mgr;
 69   }
 70 
 71 
 72   public String getHiredate() {
 73     return hiredate;
 74   }
 75 
 76   public void setHiredate(String hiredate) {
 77     this.hiredate = hiredate;
 78   }
 79 
 80 
 81   public Double getSal() {
 82     return sal;
 83   }
 84 
 85   public void setSal(Double sal) {
 86     this.sal = sal;
 87   }
 88 
 89 
 90   public Double getComm() {
 91     return comm;
 92   }
 93 
 94   public void setComm(Double comm) {
 95     this.comm = comm;
 96   }
 97 
 98   public Dept getDept() {
 99     return dept;
100   }
101 
102   public void setDept(Dept dept) {
103     this.dept = dept;
104   }
105 
106   @Override
107   public String toString() {
108     return "Emp{" +
109             "empno=" + empno +
110             ", ename='" + ename + '\'' +
111             ", job='" + job + '\'' +
112             ", mgr=" + mgr +
113             ", hiredate='" + hiredate + '\'' +
114             ", sal=" + sal +
115             ", comm=" + comm +
116             ", dept=" + dept +
117             '}';
118   }
119 }

Emp.java

4、在java目录下的com.mapper包下创建映射接口

1 package com.mapper;
2 import com.pojo.Dept;
3 
4 import java.util.List;
5 
6 public interface DeptMapper {
7     List<Dept> selectAllDept();
8 }

DeptMapper.java

 1 package com.mapper;
 2 import com.pojo.Emp;
 3 
 4 import java.util.List;
 5 
 6 public interface EmpMapper {
 7     List<Emp> selectEmp(Emp emp);
 8     int insertEmp(Emp emp);
 9     int updateEmp(Emp emp);
10     int deleteEmp(Emp emp);
11 }

EmpMapper.java

5、在java目录下的com.service包下创建业务层接口和实现类

1 package com.service;
2 
3 import com.pojo.Dept;
4 
5 import java.util.List;
6 
7 public interface DeptService {
8     List<Dept> downOption();
9 }

DeptService.java

 1 package com.service;
 2 
 3 import com.mapper.DeptMapper;
 4 import com.pojo.Dept;
 5 import org.springframework.beans.factory.annotation.Autowired;
 6 import org.springframework.stereotype.Service;
 7 
 8 import java.util.List;
 9 
10 @Service
11 public class DeptServiceImpl implements DeptService{
12     @Autowired
13     private DeptMapper deptMapper;
14 
15 
16     @Override
17     public List<Dept> downOption() {
18         return deptMapper.selectAllDept();
19     }
20 }

DeptServiceImpl.java

 1 package com.service;
 2 
 3 import com.github.pagehelper.PageInfo;
 4 import com.pojo.Emp;
 5 
 6 import java.util.List;
 7 
 8 public interface EmpService {
 9     List<Emp> show(Emp emp);
10     PageInfo<Emp> showPage(Integer pageno, Integer pagesize, Emp emp);
11     int add(Emp emp);
12     int edit(Emp emp);
13     int del(Emp emp);
14 }

EmpService.java

 1 package com.service;
 2 
 3 import com.github.pagehelper.PageHelper;
 4 import com.github.pagehelper.PageInfo;
 5 import com.mapper.EmpMapper;
 6 import com.pojo.Emp;
 7 import org.springframework.beans.factory.annotation.Autowired;
 8 import org.springframework.stereotype.Service;
 9 import org.springframework.transaction.annotation.Transactional;
10 
11 import java.util.List;
12 
13 /*
14 @Service的功能等同于代理对象在spring的xml文件中动态添加bean节点,
15 如果不指定名称，则底层代理在构建bean节点的时候id是类的第一个首字母小写
16 <bean id="empServiceImpl" class="com.service.EmpServiceImpl"/>
17 @Service(value = "empse")的功能等同于代理对象在spring的xml文件中动态添加id值为empse的bean节点
18 <bean id="empse" class="com.service.EmpServiceImpl"/>
19 */
20 @Service
21 @Transactional
22 public class EmpServiceImpl implements EmpService {
23     /*
24     @Autowired是spring的资源包下注解，按照对象的类型进行自动注入，
25     和对象名称无关，只要类型是匹配的，代理就会在你需要的时候给你注入对象值
26     @Resource是javax包下的注解，按照对象属性名进行注入，
27     和对象名称关系密切，如果对象名称不匹配，则不能完成注入，会报错
28     总结：相比而言，使用@Resource的出错记录更大，因此我们常规选择使用@Autowired
29      */
30     @Autowired
31     private EmpMapper empMapper;
32 
33      // ★★★★
34     @Override
35     public PageInfo<Emp> showPage(Integer pageno, Integer pagesize, Emp emp) {
36         //封装分页参数值
37          PageHelper.startPage(pageno,pagesize);
38         //查询所有
39         List<Emp> empList=empMapper.selectEmp(emp);
40         //返回根据分页集合对象再进行分页
41         return new PageInfo<Emp>(empList);
42     }
43 
44     @Override
45     public List<Emp> show(Emp emp) {
46         return empMapper.selectEmp(emp);
47     }
48 
49     @Override
50     public int add(Emp emp) {
51         return empMapper.insertEmp(emp);
52     }
53 
54     @Override
55     public int edit(Emp emp) {
56         return empMapper.updateEmp(emp);
57     }
58 
59     @Override
60     public int del(Emp emp) {
61         return empMapper.deleteEmp(emp);
62     }
63 }

EmpServiceImpl.java

6、在java目录下的com.controller包下创建控制类CenterController.java

 1 package com.controller;
 2 
 3 import com.github.pagehelper.PageInfo;
 4 import com.pojo.Dept;
 5 import com.pojo.Emp;
 6 import com.service.DeptService;
 7 import com.service.EmpService;
 8 import org.springframework.beans.factory.annotation.Autowired;
 9 import org.springframework.stereotype.Controller;
10 import org.springframework.ui.Model;
11 import org.springframework.web.bind.annotation.RequestMapping;
12 import org.springframework.web.bind.annotation.ResponseBody;
13 import org.springframework.web.bind.annotation.RestController;
14 
15 import javax.servlet.http.HttpSession;
16 import java.util.HashMap;
17 import java.util.List;
18 import java.util.Map;
19 
20 @RestController
21 public class CenterController {
22     @Autowired
23     private DeptService deptService;
24 
25     @Autowired
26     private EmpService empService;
27 
28     @RequestMapping("/option.do")
29     public List<Dept> optionData(){
30         return deptService.downOption();
31     }
32     @RequestMapping("/page.do")
33     public PageInfo<Emp> showPage(Integer pageno,Emp emp){
34         return empService.showPage(pageno,3,emp);
35     }
36 
37     //因为修改页面需要下拉列表和对象给表单value赋值，因此回调时携带一个对象一个集合，因此用map
38     @RequestMapping("/info.do")
39     public Map<String,Object> info(Emp emp){
40         Map<String,Object> map=new HashMap<String,Object>();
41         map.put("info",empService.show(emp).get(0));
42         map.put("deptlist",deptService.downOption());
43         return map;
44     }
45     @RequestMapping("/edit.do")
46     public int edit(Emp emp){
47         return empService.edit(emp);
48     }
49     @RequestMapping("/add.do")
50     public int add(Emp emp){
51         return empService.add(emp);
52     }
53 
54     @RequestMapping("/del.do")
55     public int del(Emp emp){
56         return empService.del(emp);
57     }
58 
59 
60 
61 
62 }

CenterController.java

7、在resouces目录下mapper文件夹下创建映射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 <!--配置规则：-->
 4 <!--有代理的namespace值必须是映射接口全路径，sql节点的id值必须是映射接口中的方法名-->
 5 <!--无代理的namespace值和sql节点的id值是任意的，但一般情况下和和有代理的原则一样-->
 6 <mapper namespace="com.mapper.DeptMapper">
 7      <select id="selectAllDept" resultType="Dept">
 8           select * from dept
 9      </select>
10 </mapper>

DeptMapper.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="com.mapper.EmpMapper">
  4    <!-- 案例：select * from emp where empno=#{empno} or ename=#{ename} and job=#{job}
  5     如果select节点中是以上sql语句，parameterType是Emp类型，则此情况可以使用where标签,
  6     where标签的作用是如果if条件不满足则执行，如果满足if条件将会忽略where关键字后的
  7     第一个or或and
  8     select * from emp
  9     <where>
 10         <if test="empno!=null">
 11             empno=#{empno}
 12         </if>
 13         <if test="ename!=null">
 14            or ename=#{ename}
 15         </if>
 16         <if test="job!=null">
 17            and job=#{job}
 18         </if>
 19     </where>
 20     -->
 21     <!--if或when的test条件中的属性判断，必须从参数对象的第一层属性判断起，-->
 22     <!--如果Emp类中有empno属性，有dept对象属性，则要判断empno值和dept中deptno的值，-->
 23     <!--则写法是empno！=null，dept！=null && dept.deptno!=null-->
 24     <select id="selectEmp" resultMap="empmap" parameterType="Emp">
 25          select d.dname,d.loc,e.* from emp e,dept d where e.deptno=d.deptno
 26          <if test="empno!=null">
 27              and e.empno=#{empno}
 28          </if>
 29          <if test="ename!=null">
 30              and e.ename=#{ename}
 31          </if>
 32          <if test="job!=null">
 33              and e.job=#{job}
 34          </if>
 35          <if test="dept!=null and dept.deptno!=null and dept.deptno!=-1">
 36              and e.deptno=#{dept.deptno}
 37          </if>
 38     </select>
 39 
 40     <resultMap id="empmap" type="Emp">
 41         <!--因为当前多方配置，因此在resultMap中先配置多方的主键和普通列的映射-->
 42         <id column="EMPNO" property="empno"/>
 43         <result column="ENAME" property="ename"/>
 44         <result column="JOB " property="job"/>
 45         <result column="MGR" property="mgr"/>
 46         <result column="HIREDATE" property="hiredate"/>
 47         <result column="SAL" property="sal"/>
 48         <result column="COMM" property="comm"/>
 49 
 50         <!--因为在多方引用了一方的对象，因此在引用一方对象属性的地方配置association节点-->
 51         <!--association节点的property属性对应的多方引用一方的对象属性名,-->
 52         <!--javaType是多方引用一方的类类型即配置类的全路径-->
 53         <!--column是多方关联一方的外键列的列名-->
 54         <association property="dept" javaType="Dept" column="DEPTNO">
 55             <!--由于多方引用的了一方对象，因此在association对象节点下配置一方的主键和普通字段-->
 56             <id column="DEPTNO" property="deptno"/>
 57             <result column="DNAME" property="dname"/>
 58             <result column="LOC" property="loc"/>
 59         </association>
 60     </resultMap>
 61 
 62     <insert id="insertEmp" parameterType="Emp">
 63          INSERT  INTO emp(empno, ename, job, mgr, hiredate, sal, comm, deptno) VALUES(#{empno},#{ename},#{job},#{mgr},#{hiredate},#{sal},#{comm},#{dept.deptno})
 64     </insert>
 65 
 66     <!--set标签的结束标签要在where条件之前-->
 67     <update id="updateEmp" parameterType="Emp">
 68         UPDATE emp
 69         <set>
 70             <if test="ename!=null">
 71                 ename=#{ename} ,
 72             </if>
 73             <if test="job!=null">
 74                 job=#{job} ,
 75             </if>
 76             <if test="mgr!=null">
 77                    mgr=#{mgr} ,
 78             </if>
 79             <if test="hiredate!=null">
 80                 hiredate=#{hiredate} ,
 81             </if>
 82             <if test="sal!=null">
 83                  sal=#{sal},
 84             </if>
 85             <if test="comm!=null">
 86                comm=#{comm},
 87             </if>
 88             <if test="dept!=null and dept.deptno!=null">
 89                deptno=#{dept.deptno}  ,
 90             </if>
 91         </set>
 92         <include refid="wherecondition"/>
 93     </update>
 94 
 95     <delete id="deleteEmp" parameterType="Emp">
 96         delete from emp
 97         <include refid="wherecondition"/>
 98     </delete>
 99 
100      <!--定义公共的sql片段-->
101    <sql id="wherecondition">
102        <where>
103            <if test="empno!=null">
104                empno=#{empno}
105            </if>
106        </where>
107    </sql>
108 
109 </mapper>

EmpMapper.xml

8、在resouces目录下mapper文件夹下编辑核心属性文件

 1 server.port=9090
 2 
 3 spring.datasource.driver-class-name=com.mysql.jdbc.Driver
 4 spring.datasource.url=jdbc:mysql://localhost:3306/ar
 5 spring.datasource.username=root
 6 spring.datasource.password=123456
 7 
 8 mybatis.type-aliases-package=com.pojo
 9 
10 mybatis.mapper-locations=classpath:mapper/*.xml
11 
12 pagehelper.helper-dialect=mysql

application.properties

10、在resouces目录下的static文件夹下创建js目录，且将jquery的库文件jquery-1.8.3.js拷贝进去

11、在resouces目录下的static文件夹下main.html文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 7     <script type="text/javascript" src="js/main.js"></script>
 8 </head>
 9 <body>
10 <a href="add.html">添加</a>
11 <div>
12     <select name="dept.deptno" id="deptno"></select>
13     <input type="button" value="查询">
14 </div>
15 <table></table>
16 <p id="pageroot"></p>
17 </body>
18 </html>

main.html

12、在resouces目录下的static文件夹的js目录下创建main.js文件

  1 $(function () {
  2     //下拉列表数据
  3     optionData();
  4     //初始化查询所有
  5     initData(1,-1);
  6 
  7     $("[type=button]").click(function () {
  8         var deptno=$("#deptno").val();
  9         alert(deptno);
 10         initData(1,deptno);
 11     });
 12 });
 13 
 14 function optionData() {
 15     $.ajax({
 16         url:"option.do",
 17         type:"post",
 18         dataType:"json",
 19         data:{},
 20         async:true,
 21         success:function (obj) {
 22             //将值打印在控制台
 23             console.log(obj);
 24             $("select").html(" ");
 25             var str="<option value=-1>--请选择--</option>";
 26             for(var i=0;i<obj.length;i++){
 27                 str+="<option value="+obj[i].deptno+">"+obj[i].dname+"</option>";
 28             }
 29             $("select").append(str);
 30         },
 31         error:function () {
 32             alert("get data error");
 33         }
 34     });
 35 }
 36 function initData(pageno,deptno) {
 37     $.ajax({
 38         url:"page.do",
 39         type:"post",
 40         dataType:"json",
 41         data:{"pageno":pageno,"dept.deptno":deptno},
 42         async:true,
 43         success:function (obj) {
 44             //将值打印在控制台
 45             console.log(obj);
 46 
 47             //为了防止频繁发送请求重复拼接问题，因此在拼接数据之前，先清楚原有的数据内容
 48             $("table").html(" ");
 49             var str=" <tr>";
 50             str+="     <th>员工编号</th>";
 51             str+="     <th>员工姓名</th>";
 52             str+="     <th>员工工资</th>";
 53             str+="     <th>部门名称</th>";
 54             str+="     <th>操作</th>";
 55             str+=" </tr>";
 56             for(var i=0;i<obj.list.length;i++){
 57                 str+="<tr>";
 58                 str+="<td>"+obj.list[i].empno     +"</td>";
 59                 str+="<td>"+obj.list[i].ename     +"</td>";
 60                 str+="<td>"+obj.list[i].sal       +"</td>";
 61                 str+="<td>"+obj.list[i].dept.dname+"</td>";
 62                 str+="<td>" +
 63                     "<a href='https://www.cnblogs.com/holly8/p/edit.html?empno="+obj.list[i].empno+"'>修改</a>" +
 64                     "|" +
 65                     "<a href='javascript:void(0);' onclick='del("+obj.list[i].empno+")'>删除</a>" +
 66                     "</td>";
 67                 str+="</tr>";
 68             }
 69             $("table").append(str);
 70 
 71             var pagestr="第"+obj.pageNum+"/"+obj.pages+"页";
 72             pagestr+="&nbsp;&nbsp;";
 73             if(pageno>1){
 74                 pagestr+="<a href='javascript:void(0);' onclick='pageData(1)'>首页</a>";
 75                 pagestr+="&nbsp;&nbsp;";
 76                 pagestr+="<a href='javascript:void(0);' onclick='pageData("+obj.prePage+")'>上一页</a>";
 77                 pagestr+="&nbsp;&nbsp;";
 78             }else{
 79                 pagestr+="<a href='javascript:alert(\"已经是第一页！\");'>首页</a>";
 80                 pagestr+="&nbsp;&nbsp;";
 81                 pagestr+="<a href='javascript:alert(\"已经是第一页,无上一页！\");'>上一页</a>";
 82                 pagestr+="&nbsp;&nbsp;";
 83             }
 84             if(pageno<obj.pages){
 85                 pagestr+="<a href='javascript:void(0);' onclick='pageData("+obj.nextPage+")'>下一页</a>";
 86                 pagestr+="&nbsp;&nbsp;";
 87                 pagestr+="<a href='javascript:void(0);' onclick='pageData("+obj.pages+")'>末页</a>";
 88                 pagestr+="&nbsp;&nbsp;";
 89             }else{
 90                 pagestr+="<a href='javascript:alert(\"已经是最后一页！\");'>下一页</a>";
 91                 pagestr+="&nbsp;&nbsp;";
 92                 pagestr+="<a href='javascript:alert(\"已经是最后一页,无下一页！\");'>末页</a>";
 93                 pagestr+="&nbsp;&nbsp;";
 94             }
 95             pagestr+="共"+obj.total+"条";
 96 
 97             $("#pageroot").html(pagestr);
 98 
 99         },
100         error:function () {
101             alert("get data error");
102         }
103     });
104 }
105 function  pageData(pageno) {
106     //获取下列列表的条件
107     var deptno=$("#deptno").val();
108     initData(pageno,deptno);
109 }
110 
111 function del(empno) {
112     $.ajax({
113         url: "del.do",
114         type: "post",
115         dataType: "json",
116         data: {"empno": empno},
117         async: true,
118         success: function (obj) {
119             location.href = "main.html";
120         },
121         error: function () {
122             alert("del error");
123         }
124     });
125 }

main.js

13、在resouces目录下的static文件夹下edit.html文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 7     <script type="text/javascript" src="js/edit.js"></script>
 8 </head>
 9 <body>
10    <fieldset>
11        <legend>编辑员工信息</legend>
12        <form id="edit">
13            <input type="hidden" name="empno" value="">
14            <table>
15                <tr>
16                    <th>部门名称：</th>
17                    <td>
18                        <select name="dept.deptno" id="deptno"></select>
19                    </td>
20                </tr>
21                <tr>
22                    <th>员工姓名：</th>
23                    <td><input type="text" name="ename" value=""></td>
24                </tr>
25                <tr>
26                    <th>员工薪资：</th>
27                    <td><input type="text" name="sal" value=""></td>
28                </tr>
29                <tr>
30                    <td colspan="2" align="center">
31                        <input type="button" value="提交">
32                        <input type="reset" value="重置">
33                    </td>
34                </tr>
35            </table>
36        </form>
37    </fieldset>
38 </body>
39 </html>

edit.html

14、在resouces目录下的static文件夹的js目录下创建edit.js文件

 1 $(function () {
 2     var empno=getLocationParam("empno");
 3     initData(empno);
 4 
 5     $("[type=button]").click(function () {
 6          editData();
 7     });
 8 });
 9 function editData(){
10     $.ajax({
11         url: "edit.do",
12         type: "post",
13         dataType: "json",
14         data: $("#edit").serialize(),
15         async: true,
16         success: function (obj) {
17             location.href = "main.html";
18         },
19         error: function () {
20             alert("edit error");
21         }
22     });
23 }
24 function initData(empno){
25     $.ajax({
26         url: "info.do",
27         type: "post",
28         dataType: "json",
29         data: {"empno": empno},
30         async: true,
31         success: function (obj) {
32             //将值打印在控制台
33             console.log(obj);
34             //拼接下拉列表的内容
35             $("select").html(" ");
36             var str="<option value=-1>--请选择--</option>";
37             for(var i=0;i<obj.deptlist.length;i++){
38                 if(obj.deptlist[i].deptno==obj.info.dept.deptno){
39                     str+="<option value="+obj.deptlist[i].deptno+" selected='selected'>"
40                     str+=obj.deptlist[i].dname+"</option>";
41                 }else{
42                     str+="<option value="+obj.deptlist[i].deptno+">"+obj.deptlist[i].dname+"</option>";
43                 }
44             }
45             $("select").append(str);
46 
47             //给表单的value属性赋值
48             $("[name=empno]").val(obj.info.empno);
49             $("[name=ename]").val(obj.info.ename);
50             $("[name=sal]").val(obj.info.sal);
51         }, error: function () {
52            alert("info error");
53         }
54     });
55 }
56 //(很重要)截取地址栏上的参数
57 function getLocationParam(name) {
58     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
59     var r = window.location.search.substr(1).match(reg);
60     // alert(window.location.search);
61     if (r != null) return unescape(r[2]); return null;
62 }

edit.js

15、在resouces目录下的static文件夹下add.html文

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 7     <script type="text/javascript" src="js/add.js"></script>
 8 </head>
 9 <body>
10    <fieldset>
11        <legend>添加员工信息</legend>
12        <form id="add">
13            <table>
14                <tr>
15                    <th>部门名称：</th>
16                    <td>
17                        <select name="dept.deptno" id="deptno"></select>
18                    </td>
19                </tr>
20                <tr>
21                    <th>员工编号：</th>
22                    <td><input type="text" name="empno" ></td>
23                </tr>
24                <tr>
25                    <th>员工姓名：</th>
26                    <td><input type="text" name="ename" ></td>
27                </tr>
28                <tr>
29                    <th>员工薪资：</th>
30                    <td><input type="text" name="sal" ></td>
31                </tr>
32                <tr>
33                    <td colspan="2" align="center">
34                        <input type="button" value="提交">
35                        <input type="reset" value="重置">
36                    </td>
37                </tr>
38            </table>
39        </form>
40    </fieldset>
41 </body>
42 </html>

add.html

16、在resouces目录下的static文件夹的js目录下创建add.js文件

 1 $(function () {
 2     optionData();
 3 
 4     $("[type=button]").click(function () {
 5          addData();
 6     });
 7 });
 8 function addData(){
 9     $.ajax({
10         url: "add.do",
11         type: "post",
12         dataType: "json",
13         data: $("#add").serialize(),
14         async: true,
15         success: function (obj) {
16             location.href = "main.html";
17         },
18         error: function () {
19             alert("add error");
20         }
21     });
22 }
23 function optionData() {
24     $.ajax({
25         url:"option.do",
26         type:"post",
27         dataType:"json",
28         data:{},
29         async:true,
30         success:function (obj) {
31             //将值打印在控制台
32             console.log(obj);
33             $("select").html(" ");
34             var str="<option value=-1>--请选择--</option>";
35             for(var i=0;i<obj.length;i++){
36                 str+="<option value="+obj[i].deptno+">"+obj[i].dname+"</option>";
37             }
38             $("select").append(str);
39         },
40         error:function () {
41             alert("option data error");
42         }
43     });
44 }