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+=" "; 73 if(pageno>1){ 74 pagestr+="<a href='javascript:void(0);' onclick='pageData(1)'>首页</a>"; 75 pagestr+=" "; 76 pagestr+="<a href='javascript:void(0);' onclick='pageData("+obj.prePage+")'>上一页</a>"; 77 pagestr+=" "; 78 }else{ 79 pagestr+="<a href='javascript:alert(\"已经是第一页！\");'>首页</a>"; 80 pagestr+=" "; 81 pagestr+="<a href='javascript:alert(\"已经是第一页,无上一页！\");'>上一页</a>"; 82 pagestr+=" "; 83 } 84 if(pageno<obj.pages){ 85 pagestr+="<a href='javascript:void(0);' onclick='pageData("+obj.nextPage+")'>下一页</a>"; 86 pagestr+=" "; 87 pagestr+="<a href='javascript:void(0);' onclick='pageData("+obj.pages+")'>末页</a>"; 88 pagestr+=" "; 89 }else{ 90 pagestr+="<a href='javascript:alert(\"已经是最后一页！\");'>下一页</a>"; 91 pagestr+=" "; 92 pagestr+="<a href='javascript:alert(\"已经是最后一页,无下一页！\");'>末页</a>"; 93 pagestr+=" "; 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、部署启动运行
