ssm整合之CRUD增删改查(ajax版)案例

超、凢脫俗 2022-12-18 01:54 95阅读 0赞

## 最终页面效果: ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center]

## 案例目录结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 2]

## 数据库表 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 3]

## 表的设计: ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2MjEzOTg_size_16_color_FFFFFF_t_70_pic_center]

# Controller方法返回值类型Object #

*  （1）Controller方法返回类型可以有几种？  
    ModelAndView  
    void  
    `String`  
    `Object`
 *  （2）@ResponseBody  
    调jackson库将Object转成json字符串返回  
    如果没有依赖jackson库则，抛出异常  
    `HttpMessageNotWritableException: No converter found for return value of type: class java.util.ArrayList`
 *  （3）依赖配置jackson库

<dependency>
              <groupId>com.fasterxml.jackson.core</groupId>
              <artifactId>jackson-databind</artifactId>
              <version>2.11.3</version>
          </dependency>

# Controller方法返回Result #

*  （1）返回结果Result
    
        private int code;//编码
         private String msg;//提示信息
         private Object data; //数据
 *  （2）将数据放到Result对象中

public class Result { 
        private int code;//编码 404 200
        private String msg;//提示信息
        private Object data; //数据
    
        public static Result init(int code, String msg, Object data){ 
            Result result =new Result(code,msg,data);
            return result;
        }
        private Result() { 
        }
    
        private Result(int code, String msg, Object data) { 
            this.code = code;
            this.msg = msg;
            this.data = data;
        }

# Controller方法返回Result #

@Controller
    @RequestMapping("/deptv2") //写在类上面指定当前模块路径
    public class DepartmentV2Controller { 
    
        @Autowired
        private IDepartmentService departmentService;//controller调用 service层
        /*@RequestMapping(path="/xx") public 返回值类型 方法名(参数){ //页面提交过来的请求参数 //.. 返回值类型决定返回给浏览器的内容 } */
        @RequestMapping(path="/listUI",method = RequestMethod.GET)
        public String listUI(){ 
    
            return "list_depts";
        }
    
        //地址上带UI表示打开页面，不带的表示返回数据
        @RequestMapping(path="/list",method = RequestMethod.GET)
        public @ResponseBody //将list调jackson转成json字符串
        Object list(){ 
            //业务逻辑 调用查找所有的部门的方法
            List<Department> list =  departmentService.findAllDepartments();
            return Result.init(200,"",list);//返回对象需要被转成json字符串
        }
    }

# Ajax回顾 #

*  （1）ajax是什么  
    Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）
 *  （2）ajax有什么特点  
    通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。即可以在不重新加载整个网页的情况下，对网页的某部分进行更新  
    `上一个版本 使用重定向或者请求转发的，叫整体刷新`  
    `今天 使用ajax不需要重定向或者请求转发`
 *  （3）具体编程内容  
    js 发送请求  
    js 接收结果  
    js 更新页面

# Jquery实现Ajax #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2MjEzOTg_size_16_color_FFFFFF_t_70_pic_center 1]

*  （1）导入jquery库  
    将库文件复到项目中  
    在页面中引入库

<%
        pageContext.setAttribute("path",request.getContextPath());
    %>
    <head>
        <title>Title</title>
        
        <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
    </head>

*  （2）代码编写  
    js 发送请求 $.get $.post serialize()  
    js 接收结果 function(data)\{…\}  
    js 更新页面 $(id值) html()

## list.jsp ##

function deleteById(did) { 
                $.get('${path}/deptv2/delete?did='+did,function (result) { 
                    console.info(result)
                    if(200==result.code){ 
                        alert(result.msg)
                        refreshTable()//调用列表更新
                    }else{ 
                        alert(result.msg)
                    }
                },'json')
            }
    <a href="javascript:deleteById('+dept.did+')">删除</a>

*  默认情况下点击超链接 是跳转页面-整体刷新
 *  Ajax是局部刷新，点击链接调用函数，函数内部发起请求，处理返回结果，更新页面

# 属性display:none #

*  Ajax不切换页面，所有内容在一个页面，只需要通过style的属性display，将值设置为none不可见，不占高度。
 *  如果需要显示出来，设置display的值为block

# 案例完整详细代码: #

## pom.xml ##

<?xml version="1.0" encoding="UTF-8"?>
    
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
    
      <groupId>com.lbl</groupId>
      <artifactId>ssm05_ajax</artifactId>
      <version>1.0-SNAPSHOT</version>
      <packaging>war</packaging>
    
      <name>ssm05_ajax Maven Webapp</name>
      
      <url>http://www.example.com</url>
    
      <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <spring.version>5.2.9.RELEASE</spring.version>
        <slf4j.version>1.6.6</slf4j.version>
        <log4j.version>1.2.12</log4j.version>
        <mysql.version>5.1.6</mysql.version>
        <mybatis.version>3.4.5</mybatis.version>
      </properties>
    
      <dependencies>
        
        <dependency>
          <groupId>org.aspectj</groupId>
          <artifactId>aspectjweaver</artifactId>
          <version>1.6.8</version>
        </dependency>
    
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-aop</artifactId>
          <version>${spring.version}</version>
        </dependency>
    
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-context</artifactId>
          <version>${spring.version}</version>
        </dependency>
    
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-web</artifactId>
          <version>${spring.version}</version>
        </dependency>
    
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-webmvc</artifactId>
          <version>${spring.version}</version>
        </dependency>
    
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-test</artifactId>
          <version>${spring.version}</version>
        </dependency>
    
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-tx</artifactId>
          <version>${spring.version}</version>
        </dependency>
    
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-jdbc</artifactId>
          <version>${spring.version}</version>
        </dependency>
    
        <dependency>
          <groupId>junit</groupId>
          <artifactId>junit</artifactId>
          <version>4.12</version>
          <scope>test</scope>
        </dependency>
    
        <dependency>
          <groupId>mysql</groupId>
          <artifactId>mysql-connector-java</artifactId>
          <version>${mysql.version}</version>
        </dependency>
    
        <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>servlet-api</artifactId>
          <version>2.5</version>
          <scope>provided</scope>
        </dependency>
    
        <dependency>
          <groupId>javax.servlet.jsp</groupId>
          <artifactId>jsp-api</artifactId>
          <version>2.0</version>
          <scope>provided</scope>
        </dependency>
    
        <dependency>
          <groupId>jstl</groupId>
          <artifactId>jstl</artifactId>
          <version>1.2</version>
        </dependency>
    
        
        <dependency>
          <groupId>log4j</groupId>
          <artifactId>log4j</artifactId>
          <version>${log4j.version}</version>
        </dependency>
    
        <dependency>
          <groupId>org.slf4j</groupId>
          <artifactId>slf4j-api</artifactId>
          <version>${slf4j.version}</version>
        </dependency>
    
        <dependency>
          <groupId>org.slf4j</groupId>
          <artifactId>slf4j-log4j12</artifactId>
          <version>${slf4j.version}</version>
        </dependency>
    
        
        <dependency>
          <groupId>org.mybatis</groupId>
          <artifactId>mybatis</artifactId>
          <version>${mybatis.version}</version>
        </dependency>
    
        <dependency>
          <groupId>org.mybatis</groupId>
          <artifactId>mybatis-spring</artifactId>
          <version>1.3.0</version>
        </dependency>
    
        <dependency>
          <groupId>c3p0</groupId>
          <artifactId>c3p0</artifactId>
          <version>0.9.1.2</version>
          <type>jar</type>
          <scope>compile</scope>
        </dependency>
        <dependency>
          <groupId>org.projectlombok</groupId>
          <artifactId>lombok</artifactId>
          <version>1.18.12</version>
        </dependency>
    
        <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.11.3</version>
        </dependency>
      </dependencies>
    </project>

\#\#applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/aop https://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
    
        <context:component-scan base-package="com.lbl">
            <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
        </context:component-scan>
        
        <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
            <property name="jdbcUrl" value="jdbc:mysql://47.115.79.211:3308/crud?useUnicode=true&characterEncoding=utf8"></property>
            <property name="driverClass" value="com.mysql.jdbc.Driver"></property>
            <property name="user" value="root"></property>
            <property name="password" value="admin123"></property>
        </bean>
        
        <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
            <property name="dataSource" ref="dataSource"/>
            
            <property name="typeAliasesPackage" value="com.lbl.domain"/>
        </bean>
        
        <bean id="mapperScanner" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
            <property name="basePackage" value="com.lbl.dao"/>
            <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        </bean>
    
        
        
        <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
            <property name="dataSource" ref="dataSource"/>
        </bean>
        <tx:advice id="txAdvice" transaction-manager="transactionManager">
            <tx:attributes>
                <tx:method name="find*" read-only="true"/>
                <tx:method name="*" isolation="DEFAULT"/>
            </tx:attributes>
        </tx:advice>
        
        <aop:config>
            <aop:pointcut id="service" expression="execution(* com.lbl.service.impl.*ServiceImpl.*(..))"/>
            <aop:advisor advice-ref="txAdvice" pointcut-ref="service"/>
        </aop:config>
    </beans>

## log4j.properties ##

# Set root category priority to INFO and its only appender to CONSOLE.
    #log4j.rootCategory=INFO, CONSOLE            debug   info   warn error fatal
    log4j.rootCategory=debug, CONSOLE, LOGFILE
    
    # Set the enterprise logger category to FATAL and its only appender to CONSOLE.
    log4j.logger.org.apache.axis.enterprise=FATAL, CONSOLE
    
    # CONSOLE is set to be a ConsoleAppender using a PatternLayout.
    log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
    log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
    log4j.appender.CONSOLE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n
    
    # LOGFILE is set to be a File appender using a PatternLayout.
    log4j.appender.LOGFILE=org.apache.log4j.FileAppender
    log4j.appender.LOGFILE.File=F:/ssmTest/log4j/ssm5_ajax.log
    log4j.appender.LOGFILE.Append=true
    log4j.appender.LOGFILE.layout=org.apache.log4j.PatternLayout
    log4j.appender.LOGFILE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n

## springmvc.xml ##

## Department ##

/** * Created by 李柏霖 * 2020/10/18 20:33 */
    
    package com.lbl.domain;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class Department { 
        private Integer did;
        private String dname;
    
        public Department(String dname) { 
            this.dname = dname;
        }
    }

## Employee ##

/** * Created by 李柏霖 * 2020/10/18 20:33 */
    
    package com.lbl.domain;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class Employee { 
        private Integer eid;
        private String ename;
        private Integer gander;
        private Integer did;
    
        public Employee(String ename, Integer gander, Integer did) { 
            this.ename = ename;
            this.gander = gander;
            this.did = did;
        }
    }

## IDepartmentService ##

/** * Created by 李柏霖 * 2020/10/18 20:34 */
    
    package com.lbl.service;
    
    import com.lbl.domain.Department;
    
    import java.util.List;
    
    public interface IDepartmentService { 
        List<Department> findAll();
    
        Department findById(Integer did);
    
        void save(Department department);
    
        void saveDepartments(List<Department> departments);
    
        void deleteById(Integer did);
    
        void update(Department department);
    
    
    }

## IEmployeeService ##

/** * Created by 李柏霖 * 2020/10/18 20:34 */
    
    package com.lbl.service;
    
    import com.lbl.domain.Employee;
    
    import java.util.List;
    
    public interface IEmployeeService { 
        List<Employee> findAll();
    
        Employee findById(Integer eid);
    
        void save(Employee employee);
    
        void savePersons(List<Employee> employees);
    
        void deleteById(Integer eid);
    
        void update(Employee employee);
    }

## DepartmentServiceImpl ##

/** * Created by 李柏霖 * 2020/10/18 20:35 */
    
    package com.lbl.service.Impl;
    
    import com.lbl.dao.IDepartmentDao;
    import com.lbl.domain.Department;
    import com.lbl.service.IDepartmentService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public class DepartmentServiceImpl implements IDepartmentService { 
    
    
    
        @Autowired
        IDepartmentDao departmentDao;
    
        @Override
        public List<Department> findAll() { 
            return departmentDao.findAll();
        }
    
        @Override
        public void save(Department department) { 
            departmentDao.save(department);
        }
    
    
    
        @Override
        public void saveDepartments(List<Department> departments) { 
            for (int i = 0; i <departments.size() ; i++) { 
                departmentDao.save(departments.get(i));
            }
    
        }
    
        @Override
        public void deleteById(Integer did) { 
            departmentDao.deleteById(did);
        }
    
        @Override
        public Department findById(Integer did) { 
            return departmentDao.findById(did);
        }
    
        @Override
        public void update(Department department) { 
            departmentDao.update(department);
        }
    }

## EmployeeServiceImpl ##

/** * Created by 李柏霖 * 2020/10/18 20:35 */
    
    package com.lbl.service.Impl;
    
    import com.lbl.dao.IEmployeeDao;
    import com.lbl.domain.Employee;
    import com.lbl.service.IEmployeeService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public class EmployeeServiceImpl implements IEmployeeService { 
    
        @Autowired
        IEmployeeDao employeeDao;
    
        @Override
        public List<Employee> findAll() { 
            return employeeDao.findAll();
        }
    
        @Override
        public Employee findById(Integer eid) { 
            return employeeDao.findById(eid);
        }
    
        @Override
        public void save(Employee employee) { 
            employeeDao.save(employee);
        }
    
    
    
        @Override
        public void savePersons(List<Employee> employees) { 
            for (int i = 0; i <employees.size() ; i++) { 
                employeeDao.save(employees.get(i));
            }
        }
    
        @Override
        public void deleteById(Integer eid) { 
            employeeDao.deleteById(eid);
        }
    
        @Override
        public void update(Employee employee) { 
            employeeDao.update(employee);
        }
    }

## IDepartmentDao ##

/** * Created by 李柏霖 * 2020/10/18 20:33 */
    
    package com.lbl.dao;
    
    import com.lbl.domain.Department;
    import org.springframework.stereotype.Repository;
    
    import java.util.List;
    
    @Repository
    public interface IDepartmentDao { 
        List<Department> findAll();
    
        Department findById(Integer did);
    
        void save(Department department);
    
        void deleteById(Integer did);
    
        void update(Department department);
    }

## IEmployeeDao ##

/** * Created by 李柏霖 * 2020/10/18 20:33 */
    
    package com.lbl.dao;
    
    import com.lbl.domain.Employee;
    import org.springframework.stereotype.Repository;
    
    import java.util.List;
    
    @Repository
    public interface IEmployeeDao { 
        List<Employee> findAll();
    
        Employee findById(Integer eid);
    
        void save(Employee employee);
    
        void deleteById(Integer eid);
    
        void update(Employee employee);
    }

## IDepartment.xml ##

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.lbl.dao.IDepartmentDao">
    
    
        <select id="findAll" resultType="department">
            select * from department;
        </select>
    
        <select id="findById" parameterType="int" resultType="department">
            select * from department where did=#{did};
        </select>
    
        <insert id="save" parameterType="department">
            insert into department values(null,#{dname})
        </insert>
    
        <delete id="deleteById" parameterType="int">
            delete from department where did = #{did}
        </delete>
    
        <update id="update" parameterType="department">
            update department set dname=#{dname} WHERE did=#{did}
        </update>
    
    </mapper>

## IEmployeeDao.xml ##

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.lbl.dao.IEmployeeDao">
    
    
        <select id="findAll" resultType="employee">
                select * from employee;
        </select>
    
        <select id="findById" parameterType="int" resultType="employee">
                select * from employee where eid=#{eid};
        </select>
    
        <insert id="save" parameterType="employee">
            insert into employee values(null,#{ename},#{gander},#{did})
        </insert>
    
        <delete id="deleteById" parameterType="int">
            delete from employee where eid=#{cid}
        </delete>
    
        <update id="update" parameterType="employee">
            update employee
            <set>
                <if test="ename!=null">ename=#{ename},</if>
                <if test="gander!=null">gander=#{gander},</if>
                <if test="did!=null">did=#{did},</if>
            </set>
            where eid=#{eid}
        </update>
    </mapper>

## Result ##

/** * Created by 李柏霖 * 2020/10/19 17:37 */
    
    package com.lbl.VO;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class Result { 
        private int code;//编码 404 200
        private String msg;//提示信息
        private Object data; //数据
    
        public static Result init(int code,String msg,Object data){ 
            Result result = new Result(code, msg, data);
            return result;
        }
    }

## list.jsp ##

<%--
      Created by IntelliJ IDEA.
      User: Carlos
      Date: 2020/10/18
      Time: 20:56
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%
        pageContext.setAttribute("path", request.getContextPath());
    %>
    <script type="application/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
    <html>
    <head>
        <title>Title</title>
    </head>
    <script type="application/javascript">
    
    
        function refresh() {
            $("#table").html("");
            var li = '    <tr>\n' +
                '        <th>编号</th>\n' +
                '        <th>姓名</th>\n' +
                '        <th>性别</th>\n' +
                '        <th>部门ID</th>\n'+
                '        <th>操作1</th>\n' +
                '        <th>操作2</th>\n' +
                '    </tr>';
    
            $.get("${path}/employee/list", function (data) {
    
                var employeeList = data.data;
    
                for (var i = 0; i < employeeList.length; i++) {
                    var employee = employeeList[i];
                    li += '<tr>\n' +
                        '<td>' + employee.eid + '</td>\n' +
                        '<td>' + employee.ename + '</td>\n' +
                        '<td>' + employee.gander + '</td>\n' +
                        '<td>' + employee.did + '</td>\n' +
                        '<td><a href="javascript:deleteById(${employee.eid})">删除</a></td>\n' +
                        '<td><a href="javascript:updateUI(${employee.eid})">修改</a></td>\n' +
                        '</tr>'
                }
                $("#table").html(li);
            }, 'json')
    
    
        }
    
        function deleteById(eid) {
            $.get("${path}/employee/delete?eid=" + eid, function (data) {
                // console.log(data)
                if (200 == data.code) {
                    alert(data.msg)
                    refresh()
                } else {
                    alert(data.msg)
                    refresh()
                }
            }, 'json')
        }
    
        function updateUI(eid) {
            $.get("${path}/employee/updateUI?eid=" + eid, function (data) {
                console.log(data)
                if (200 == data.code) {
                    $("#update_form").css("display", "block")
                    $("#table").css("display", "none")
                    var employee = data.data
                    $("#eid").val(employee.eid)
                    $("#ename").val(employee.ename)
                    $("#gander").val(employee.gander)
                    $("#did").val(employee.did)
                }
            }, 'json')
        }
    
        function updateById() {
            var employee = $("#update_form").serialize();
            $.get("${path}/employee/updateById", employee, function (data) {
                console.log(data)
                $("#update_form").css("display", "none")
                $("#table").css("display", "block")
                refresh()
            }, 'json')
        }
    
        function addUI() {
                    $("#add_form").css("display", "block")
                    $("#table").css("display", "none")
        }
    
    
        function add() {
            var employee = $("#add_form").serialize();
            $.get("${path}/employee/add", employee, function (data) {
                console.log(data)
                $("#update_form").css("display", "none")
                $("#table").css("display", "block")
                refresh()
            }, 'json')
        }
    
    
    </script>
    <body>
        <a href="javascript:addUI()">添加</a>
    <table border="1px" width="100%" id="table">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>部门ID</th>
            <th>操作1</th>
            <th>操作2</th>
    
        </tr>
        <c:forEach items="${employeeList}" var="employee">
    
            <tr>
                <td>${employee.eid}</td>
                <td>${employee.ename}</td>
                <td>${employee.gander}</td>
                <td>${employee.did}</td>
                <td><a href="javascript:deleteById(${employee.eid})">删除</a></td>
                <td><a href="javascript:updateUI(${employee.eid})">修改</a></td>
            </tr>
        </c:forEach>
    </table>
    
    <form id="update_form" style="display: none">
        <h1>修改页面</h1>
        编号：<input type="text" name="eid" id="eid">
        姓名：<input type="text" name="ename" id="ename">
        性别：<input type="text" name="gander" id="gander">
        部门ID：<input type="text" name="did" id="did">
        <input id="btn_update" οnclick="updateById()" type="button" value="保存修改"/><br/>
    </form>
    
        <form id="add_form" style="display: none">
            <h1>新增页面</h1>
            姓名：<input type="text" name="ename" >
            性别：<input type="text" name="gander" >
            部门ID：<input type="text" name="did">
            <input id="btn_add" οnclick="add()" type="button" value="新增"/><br/>
        </form>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/4a8e218d92424e459f49b73e251721df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/337c7503726044fb868a76cec1987b8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221122/d0aee0e1be494f8aaed6bbb07c6828b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221122/531a7be2ac3a44cd841ecc1d92660a3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2MjEzOTg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/d508185a252a4f93a3145e31efdf4bbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2MjEzOTg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/e6f8122a86b34cc3b01d25fabdd2f867.png