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
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='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 });
125main.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;
62edit.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文件
add.js
17、部署启动运行
