最终页面效果:

在这里插入图片描述

案例目录结构

在这里插入图片描述

数据库表

在这里插入图片描述

表的设计:

在这里插入图片描述

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

在这里插入图片描述

（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>
  <!-- FIXME change it to the project's website -->
  <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>
    <!-- spring -->
    <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>

    <!-- log start -->
    <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>

    <!-- log end -->
    <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&amp;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>
    <!-- session工厂-->
    <bean id="sqlSessionFactory"  class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <!-- com.wzx.domain.Person  person-->
        <property name="typeAliasesPackage" value="com.lbl.domain"/>
    </bean>
    <!-- IPersonDao.xml  IPersonDao.java-->
    <bean id="mapperScanner" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.lbl.dao"/>
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    </bean>

    <!--配置Spring框架声明式事务管理-->
    <!--配置事务管理器-->
    <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增强-->
    <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

<?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:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!--只扫@Controller注解-->
    <context:component-scan base-package="com.lbl">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    <bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/pages/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>

    <!--过滤静态资源   .js .css png-->
    <mvc:resources location="/css/" mapping="/css/**" />
    <mvc:resources location="/images/" mapping="/images/**" />
    <mvc:resources location="/js/" mapping="/js/**" />

    <mvc:annotation-driven></mvc:annotation-driven>

</beans>

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>

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

最终页面效果:

案例目录结构

数据库表

表的设计:

Controller方法返回值类型Object

Controller方法返回Result

Controller方法返回Result

Ajax回顾

Jquery实现Ajax

list.jsp

属性display:none

案例完整详细代码:

pom.xml

log4j.properties

springmvc.xml

Department

Employee

IDepartmentService

IEmployeeService

DepartmentServiceImpl

EmployeeServiceImpl

IDepartmentDao

IEmployeeDao

IDepartment.xml

IEmployeeDao.xml

Result

list.jsp

猜你喜欢