构建ssm项目，使用jquery ajax请求实现单表的增删改查

jquery ajax实现 SSM增删改查

• • 运行结果展示：
  • • 查询：
    • 添加：
    • 修改：
    • 删除：
  • 代码整体布局：
  • 代码如下：
  • • pom.xml:
    • Category:
    • CommonResult :
    • CategoryMapper:
    • ICategoryService:
    • CategoryServiceImpl:
    • CategoryController:
    • db.properties:
    • mybatis-config.xml:
    • spring-mybatis.xml:
    • spring-mvc.xml:
    • web.xml:
    • category.jsp:
  • 关键点参考：
  • 注意：
  • • ajax中的数据传输:
    • ajax中的get/post:
    • 引入通用mapper:(可以理解为引入“接口实现类里的各种方法”)
    • 绑定表/id实现“通过主键更新/删除的方法”:
    • 接口插件：

运行结果展示：

查询：

添加：

修改：

删除：

代码整体布局：

代码如下：

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>org.example</groupId>
  <artifactId>spring_0824_KTLX2</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>
 
  <name>spring_0824_KTLX2 Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>
 
  <properties>
    <maven.compiler.source>8</maven.compiler.source>
    <maven.compiler.target>8</maven.compiler.target>
    <servlet.version>4.0.1</servlet.version>
    <jsp.version>2.2</jsp.version>
    <jstl.version>1.2</jstl.version>
    <spring.version>5.3.14</spring.version>
    <commons-dbcp.version>1.4</commons-dbcp.version>
    <mybatis.version>3.4.6</mybatis.version>
    <mybatis-spring.version>1.3.3</mybatis-spring.version>
    <mysql-connector-java.version>8.0.11</mysql-connector-java.version>
    <fastjson.version>2.0.10</fastjson.version>
  </properties>
 
  <dependencies>
    <!--添加spring依赖-->
    <!-- 添加javaEE支持 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>${servlet.version}</version>
      <!-- provided只在编译时支持，发布时不拷贝文件 -->
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>${jsp.version}</version>
      <!-- provided只在编译时支持，发布时不拷贝文件 -->
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>${jstl.version}</version>
    </dependency>
    <!--引入spring框架-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!--引入spring数据库操作的支持模块-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- dbcp数据库连接池 -->
    <dependency>
      <groupId>commons-dbcp</groupId>
      <artifactId>commons-dbcp</artifactId>
      <version>${commons-dbcp.version}</version>
    </dependency>
    <!-- mybatis spring整合 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>${mybatis-spring.version}</version>
    </dependency>
    <!-- mybatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>
    <!--mybatis插件PageHelper-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.0</version>
    </dependency>
    <!-- mysql驱动类 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>${mysql-connector-java.version}</version>
    </dependency>
    <!--mybatis通用mapper-->
    <dependency>
      <groupId>com.github.abel533</groupId>
      <artifactId>mapper</artifactId>
      <version>3.0.1</version>
    </dependency>
    <!--jackson-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.13.2.2</version>
    </dependency>
    <!--配置fastjson-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>${fastjson.version}</version>
    </dependency>
    <!--lombok-->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.22</version>
    </dependency>
    <!--引入junit-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.13</version>
      <!--scope：表示该jar包的作用范围
      <scope>test</scope>
      -->
    </dependency>
  </dependencies>
</project>
 复制

Category:

package com.aaa.demo.entity;
 
import lombok.Data;
 
import javax.persistence.Id;
import javax.persistence.Table;
 
@Data
@Table(name = "category")
public class Category {
    @Id
    private Integer categoryId;
    private String categoryName;
 
}
 复制

CommonResult :

package com.aaa.demo.entity;
 
public class CommonResult {
    //编码:0成功，1失败
    private Integer code;
    //提示消息
    private String msg;
    //记录数
    private Integer count;
    //记录数据
    private Object data;
 
    public CommonResult() {
    }
 
    public CommonResult(Integer code, String msg, Integer count, Object data) {
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = data;
    }
 
    //返回查询结果的成功信息:
    public static CommonResult success(Integer count,Object data){
        return new CommonResult(0,"success",count,data);
    }
 
    //返回增删改的成功信息
    public static CommonResult success(){
        return new CommonResult(0,"success",null,null);
    }
 
    //返回失败信息
    public static CommonResult fail(){
        return new CommonResult(1,"fail",null,null);
    }
 
 
    public Integer getCode() {
        return code;
    }
 
    public void setCode(Integer code) {
        this.code = code;
    }
 
    public String getMsg() {
        return msg;
    }
 
    public void setMsg(String msg) {
        this.msg = msg;
    }
 
    public Integer getCount() {
        return count;
    }
 
    public void setCount(Integer count) {
        this.count = count;
    }
 
    public Object getData() {
        return data;
    }
 
    public void setData(Object data) {
        this.data = data;
    }
 
    @Override
    public String toString() {
        return "CommonResult{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", count=" + count +
                ", data=" + data +
                '}';
    }
 
}
 复制

CategoryMapper:

package com.aaa.demo.mapper;
 
import com.aaa.demo.entity.Category;
import com.github.abel533.mapper.Mapper;
 
public interface CategoryMapper extends Mapper<Category> {
}
 复制

ICategoryService:

package com.aaa.demo.service;
 
import com.aaa.demo.entity.Category;
 
import java.util.List;
 
public interface ICategoryService {
    List<Category> listAll();
    int insert(Category category);
    int update(Category category);
    int delete(Integer categoryId);
}
 复制

CategoryServiceImpl:

package com.aaa.demo.service.impl;
 
import com.aaa.demo.entity.Category;
import com.aaa.demo.mapper.CategoryMapper;
import com.aaa.demo.service.ICategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import java.util.List;
 
@Service
public class CategoryServiceImpl implements ICategoryService {
    @Autowired
    private CategoryMapper categoryMapper;
    @Override
    public List<Category> listAll() {
        return categoryMapper.select(null);
    }
 
    @Override
    public int insert(Category category) {
        return categoryMapper.insert(category);
    }
 
    @Override
    public int update(Category category) {
        return categoryMapper.updateByPrimaryKey(category);
    }
 
    @Override
    public int delete(Integer categoryId) {
        return categoryMapper.deleteByPrimaryKey(categoryId);
    }
}
 复制

CategoryController:

package com.aaa.demo.controller;
 
import com.aaa.demo.entity.Category;
import com.aaa.demo.service.ICategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import java.util.List;
 
@RestController   //等价于 @Controller + @ResponseBody
@RequestMapping("/category")
public class CategoryController {
    @Autowired
    private ICategoryService iCategoryService;
 
    @RequestMapping("/list")
    public List<Category> list(){
        return iCategoryService.listAll();
    }
 
    @RequestMapping("/add")
    public int add(Category category){
        System.out.println("======add=======");
        System.out.println(category);
        return iCategoryService.insert(category);
    }
 
    @RequestMapping("/update")
    public int update(Category category){
        System.out.println("======update=======");
        System.out.println(category);
        return iCategoryService.insert(category);
    }
 
    @RequestMapping("/delete")
    public int delete(Integer categoryId){
        System.out.println("======delete========");
        System.out.println(categoryId);
        return iCategoryService.delete(categoryId);
    }
}
 复制

db.properties:

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/70813_db?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf8&allowPublicKeyRetrieval=true
jdbc.username=root
jdbc.password=123456复制

mybatis-config.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <settings>
        <!-- 配置日志工具 -->
        <setting name="logImpl" value="STDOUT_LOGGING"/>
        <!--配置将下划线字段转为小驼峰-->
        <setting name="mapUnderscoreToCamelCase" value="true"/>
    </settings>
 
    <plugins>
        <!--拦截器-->
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
 
            <property name="offsetAsPageNum" value="true"/>
            <!--配置数据库方言 4.0版本以后不用写-->
            <!--<property name="helperDialect" value="mysql"/>-->
            <!--是否做count查询-->
            <property name="rowBoundsWithCount" value="true"/>
            <!--合理化分页-->
            <property name="reasonable" value="true"/>
        </plugin>
        <plugin interceptor="com.github.abel533.mapperhelper.MapperInterceptor">
            <!--主键自增回写方法,默认值MYSQL -->
            <!--<property name="IDENTITY" value="MYSQL" />-->
            <!--通用Mapper默认接口，我们定义的Mapper需要实现该接口 -->
            <property name="mappers" value="com.github.abel533.mapper.Mapper" />
        </plugin>
    </plugins>
 
 
</configuration>复制

spring-mybatis.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"
       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">
 
    <!--配置spring扫描包-->
    <context:component-scan base-package="com.aaa.demo.service"/>
 
    <!--通过spring配置数据库的连接属性文件-->
    <context:property-placeholder location="classpath:db.properties"/>
    <!--通过spring来配置数据库连接池的数据源对象-->
    <bean id="ds" class="org.apache.commons.dbcp.BasicDataSource"
          destroy-method="close">
        <!--配置连接池数据源需要使用四大金刚(数据库连接属性)-->
        <property name="driverClassName" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>
 
    <!--通过spring来配置mybatis的会话工厂和其他相关配置
        原来的时候，mybatis的会话工厂由程序员来创建，现在通过spring来创建管理
        这个就体现了Spring的IoC特征(控制反转)
    -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--配置SqlSession依赖的数据源对象-->
        <property name="dataSource" ref="ds"/>
        <!--配置mybatis要使用的类型别名定义-->
        <property name="typeAliasesPackage" value="com.aaa.demo.entity"/>
        <!--配置mybatis的主配置文件的路径,spring会自动加载mybatis的配置文件-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <!--配置mybatis的Mapper文件的路径:spring中Mapper接口和Mapper文件路径可以由区别-->
        <property name="mapperLocations" value="classpath:com/mapper/*.xml"/>
    </bean>
    <!--通过spring来配置Mybatis的Mapper接口
        通过包扫描的方式进行配置
    -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--配置Mybatis的Mapper接口-->
        <property name="basePackage" value="com.aaa.demo.mapper"/>
        <!--配置可以创建Mapper接口对象的SqlSession使用的SqlSessionFactory对象的名字-->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    </bean>
 
</beans>复制

spring-mvc.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包，管理其中定义的controller类-->
    <context:component-scan base-package="com.aaa.demo.controller"/>
    <!--开启注解驱动
        使用注解方式配置springMVC组件
        处理器映射器，处理器适配器，
        能够解析配置的注解完成请求:@RequestMapping
    -->
    <mvc:annotation-driven/>
 
    <!--配置视图解析器(ViewResolver)-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--配置视图页面前缀-->
        <property name="prefix" value="/WEB-INF/page/"/>
        <!--配置视图页面后缀-->
        <property name="suffix" value=".jsp"/>
    </bean>
 
    <!--配置DefaultServlet处理其他请求（静态资源）-->
    <mvc:default-servlet-handler/>
 
</beans>复制

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
 
  <!--配置spring监听器，用于创建spring容器-->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <!--定义spring的配置文件，用于在spring监听器监听网站启动的时候，创建spring容器-->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring-mybatis.xml</param-value>
  </context-param>
 
  <!--配置spring的编码过滤器-->
  <filter>
    <filter-name>characterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
 
 
  <!--配置springMVC前端控制器-->
  <servlet>
    <servlet-name>springMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <!--
          springMVC需要配置组件。。。
      -->
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring-mvc.xml</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>springMVC</servlet-name>
    <!--
        凡是以.do结尾的请求都让springMVC来处理
        <url-pattern>*.do</url-pattern>
    -->
    <!--        <url-pattern>*.do</url-pattern>-->
    <!--
        斜杠配置（/)∶表示所有的默认请求都交给DisaptherServlet来处理
        导致的问题就是请求静态资源的时候无法处理
        <url-pattern>/</url-pattern>
    -->
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>复制

category.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/25
  Time: 14:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <div>分类数据</div>
    <div id="category">
 
    </div>
 
    <%--添加表单--%>
    <form id="btnAddFrm">
        分类名称：
        <input type="text" id="categoryName" name="categoryName"/>
        <input type="button" value="添加" id="btnAdd"/>
    </form>
 
    <%--修改表单--%>
    <form id="btnUpdateFrm">
        分类编号：
        <input type="text" id="categoryId" name="categoryId"/>
        分类名称：
        <input type="text"  name="categoryName"/>
        <input type="button" value="修改" id="btnUpdate"/>
    </form>
 
    <%--删除表单--%>
    <form id="btnDeleteFrm">
        分类编号：
        <input type="text" name="categoryId"/>
        <input type="button" value="删除" id="btnDelete"/>
    </form>
 
    <!--引入jqery-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/assets/jq/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            url:"${pageContext.request.contextPath}/category/list",
            type:"get",
            success:function (res){
                console.log(res);
                for(var i=0;i<res.length;i++){
                    $("#category").append("<p>"+res[i].categoryId+" "+res[i].categoryName+"</p>")
                }
            }
        })
 
        //绑定添加按钮单击
        $("#btnAdd").click(function (){
            //通过表单序列，返回表单的字符串拼接数据 :categoryId=xxx&cateName=xxx
            alert($("#btnAddFrm").serialize())
            $.ajax({
                url: "${pageContext.request.contextPath}/category/add",
                data:$("#btnAddFrm").serialize(),
                type: "post",
                success:function (res){
                    alert(res);
                }
            })
        })
 
        //绑定修改按钮单击
        $("#btnUpdate").click(function (){
            //通过表单序列，返回表单的字符串拼接数据 :categoryId=xxx&cateName=xxx
            alert($("#btnUpdateFrm").serialize())
            $.ajax({
                url:"${pageContext.request.contextPath}/category/update",
                data: $("#btnUpdateFrm").serialize(),
                type:"post",
                success:function (res){
                    alert(res);
                }
            })
        })
 
        //绑定删除按钮单击
        $("#btnDelete").click(function (){
            //通过表单序列，返回表单的字符串拼接数据 :categoryId=xxx&cateName=xxx
            alert($("#btnDeleteFrm").serialize())
            $.ajax({
                url:"${pageContext.request.contextPath}/category/delete",
                data: $("#btnDeleteFrm").serialize(),
                type:"post",
                success:function (res){
                    alert(res);
                }
            })
        })
    </script>
 
 
 
</body>
</html>
 
 
复制

关键点参考：

注意：

ajax中的数据传输:

ajax中的get/post:

引入通用mapper:(可以理解为引入“接口实现类里的各种方法”)

绑定表/id实现“通过主键更新/删除的方法”:

接口插件：