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. ...

推荐整理分享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 @Component10 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 @Override51 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 @Override107 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 @Service11 public class DeptServiceImpl implements DeptService{12 @Autowired13 private DeptMapper deptMapper;14 15 16 @Override17 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 @Service21 @Transactional22 public class EmpServiceImpl implements EmpService {23 /*24 @Autowired是spring的资源包下注解，按照对象的类型进行自动注入，25 和对象名称无关，只要类型是匹配的，代理就会在你需要的时候给你注入对象值26 @Resource是javax包下的注解，按照对象属性名进行注入，27 和对象名称关系密切，如果对象名称不匹配，则不能完成注入，会报错28 总结：相比而言，使用@Resource的出错记录更大，因此我们常规选择使用@Autowired29 */30 @Autowired31 private EmpMapper empMapper;32 33 // ★★★★34 @Override35 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 @Override45 public List<Emp> show(Emp emp) {46 return empMapper.selectEmp(emp);47 }48 49 @Override50 public int add(Emp emp) {51 return empMapper.insertEmp(emp);52 }53 54 @Override55 public int edit(Emp emp) {56 return empMapper.updateEmp(emp);57 }58 59 @Override60 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 @RestController21 public class CenterController {22 @Autowired23 private DeptService deptService;24 25 @Autowired26 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赋值，因此回调时携带一个对象一个集合，因此用map38 @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/*.xml11 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 }

add.js

17、部署启动运行