SSM + Ajax

1.创建数据库

2.创建工程，目录，导入jquery类库，并导入pom依赖

<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>4.3.7.RELEASE</spring-version>
    <jackson.version>2.5.4</jackson.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.21</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.4.1</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.1</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring-version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${spring-version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</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-jdbc</artifactId>
      <version>${spring-version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring-version}</version>
    </dependency>
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.1</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>4.1.6</version>
    </dependency>
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.20</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
  </dependencies>

3.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">
<filter>
    <filter-name>filter</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>filter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <servlet>
        <servlet-name>mvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>mvc</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
</web-app>

4.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:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"
       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 http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!-- 1.扫描包 -->
    <context:component-scan base-package="cn" />
    <!-- 2.配置两个driven,使事务的注解有效 -->
    <tx:annotation-driven transaction-manager="txManager" />
    <!-- 3.使mvc的注解有效 -->
    <mvc:annotation-driven>
        <mvc:message-converters>
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>application/json;charset=UTF-8</value>
<!--                        解决ajax中文乱码-->
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
<!--    写这两个更稳定 提高性能  需要的时候开不需要的时候关 -->
<!--    init-method="init"是指bean被初始化时执行的方法，
当bean实例化后,执行init-method用于初始化数据库连接池。-->
<!--    destroy-method="close" 是指bean被销毁时执行的方法  
 Spring容器关闭时调用该方法即调用close()将连接关闭。-->
    <!-- 4.配置数据源 -->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
        <property name="driverClassName" value="com.mysql.jdbc.Driver" />
<!--        以上 连接MySQL得话，我们就需要mysql连接驱动包-->
        <property name="url" value="jdbc:mysql://localhost:3306/db_book?characterEncoding=utf8&amp;useSSL=false&amp;serverTimezone=UTC&amp;rewriteBatchedStatements=true" />
        <property name="username" value="root" />
        <property name="password" value="zjj" />
    </bean>
    <!-- 5.配置SqlSessionFactoryBean -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--        插件写在里面 就不要配mybatis-config了-->
        <property name="dataSource" ref="dataSource" />
        <property name="plugins">
            <bean class="com.github.pagehelper.PageHelper">
                <property name="properties">
                    <value>
                        dialect=mysql
                        reasonable=true
                    </value>
<!--dialect=mysql 是为了防止多数据源的时候，会识别不出来 ，
现在没关系只有一个  绝对匹配某个数据源-->
                </property>
            </bean>
        </property>
    </bean>
    <!-- 6.配置事务 -->
    <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource" />
    </bean>
    <!-- 7.配置数据映射器,扫描mapper -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="cn.kgc.mapper" />
    </bean>
    <!-- 8.视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/" />
        <property name="suffix" value=".html" />
    </bean>
</beans>

5.实体类Book.java

package cn.kgc.entity;
import lombok.Data;
import java.io.Serializable;

@Data
public class Book implements Serializable {
    private Integer id;
    private String name;
    private String author;
    private String publish;
    private String publishdate;
    private Integer page;
    private Integer price;
    private String content;
}

6.接口BookMapper

package cn.kgc.mapper;
import cn.kgc.entity.Book;
import org.apache.ibatis.annotations.Param;
import java.util.List;
import java.util.Map;

public interface BookMapper {
    //无分页版
    List<Map<String,Object>> findAll();

    //带分页版+模糊查询
    List<Map<String,Object>> findAllByPage(@Param("book") Book book);

    //添加 这边不用map 用对象更好
    Integer addBook(Book book);

    //详情
    Map<String,Object> findById(Integer id);

    //修改
    Integer updateBook(Book book);

    //删除
    Integer delById(Integer id);
}

7.映射类BookMapper.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="cn.kgc.mapper.BookMapper">
    <select id="findAll" resultType="java.util.Map">
        select * from book
    </select>
    <select id="findAllByPage" resultType="java.util.Map">
        select * from book where 1 = 1
        <if test="book.name != null and book.name != '' ">
            and `name` like concat('%',#{book.name},'%')
        </if>
    </select>
    <insert id="addBook" parameterType="cn.kgc.entity.Book">
        insert into book(`name`,author,publish,publishdate,page,price,content)
        values (#{name},#{author},#{publish},#{publishdate},#{page},#{price},#{content})
    </insert>
    <select id="findById" parameterType="java.lang.Integer" resultType="java.util.Map">
        select * from book where id = #{id}
    </select>
    <update id="updateBook" parameterType="cn.kgc.entity.Book">
        update book
        set `name` = #{name},author = #{author},publish = #{publish},publishdate = #{publishdate},page = #{page},price = #{price},content = #{content}
        where id = #{id}
    </update>
    <delete id="delById" parameterType="java.lang.Integer">
        delete from book where id = #{id}
    </delete>
</mapper>

8.service接口BookService.java

package cn.kgc.service;

import cn.kgc.entity.Book;
import com.github.pagehelper.PageInfo;
import org.apache.ibatis.annotations.Param;

import java.util.List;
import java.util.Map;

public interface BookService {
    List<Map<String,Object>> findAll();

    //带分页版+模糊查询
   PageInfo<Map<String,Object>> findAllByPage(Book book,Integer pageNo);

    //添加 这边不用map 用对象更好
    Integer addBook(Book book);

    //详情
    Map<String,Object> findById(Integer id);

    //修改
    Integer updateBook(Book book);

    //删除
    Integer delById(Integer id);
}

9.serviceImpl接口BookServiceImpl.java

package cn.kgc.service;

import cn.kgc.entity.Book;
import cn.kgc.mapper.BookMapper;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;
import java.util.Map;

@Service
@Transactional
public class BookServiceImpl implements BookService {
    @Autowired
    private BookMapper bookMapper;

    @Override
    public List<Map<String, Object>> findAll() {
        return bookMapper.findAll();
    }

    @Override
    public PageInfo<Map<String, Object>> findAllByPage(Book book, Integer pageNo) {
        PageHelper.startPage(pageNo,4);
        return new PageInfo<>(bookMapper.findAllByPage(book));
    }

    @Override
    public Integer addBook(Book book) {
        return bookMapper.addBook(book);
    }

    @Override
    public Map<String, Object> findById(Integer id) {
        return bookMapper.findById(id);
    }

    @Override
    public Integer updateBook(Book book) {
        return bookMapper.updateBook(book);
    }

    @Override
    public Integer delById(Integer id) {
        return bookMapper.delById(id);
    }
}

10.BookController

package cn.kgc.controller;

import cn.kgc.entity.Book;
import cn.kgc.service.BookService;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;
import java.util.Map;
@Controller
public class BookController {
    @Autowired
    private BookService bookService;

    @RequestMapping("/findAll.do")
    @ResponseBody
    //json的方式
    public List<Map<String,Object>> findAll(){
        //直接传数据 不用string
        List<Map<String, Object>> list = bookService.findAll();
        return list;
    }
    @RequestMapping("/findAllByPage.do")
    @ResponseBody//返回数据 不加就是返回页面
    public PageInfo<Map<String,Object>>
    findAllByPage(@RequestParam(defaultValue = "1",required = false) Integer pageNo,
                  @RequestParam(defaultValue = "",required = false) String name){
        //        false表示可以不传参数 即是空的
        Book book = new Book();
        book.setName(name);
        return bookService.findAllByPage(book,pageNo);
    }

    @RequestMapping("/add.do")
    @ResponseBody
    public String add(Book book){
//        Integer flag = bookService.addBook(book);
        bookService.addBook(book);
//        if (flag > 0){
        return "ok";
//        }else { return "error"; }
    }
    @RequestMapping("/delById.do")
    @ResponseBody//返回的时候以json的格式  @RequestBody请求的时候以json的格式 如果没有结果那就再加个@RequestParam(value = "id") 可能是编译的问题
    public String delById(@RequestBody @RequestParam(value = "id") Integer id){
        bookService.delById(id);
        return "ok";
    }
    @RequestMapping("/findById.do")
    @ResponseBody//map会被 ResponseBody解析成json格式
    public Map<String,Object> findById(Integer id){
        return bookService.findById(id);
    }
    @RequestMapping("/update.do")
    @ResponseBody
    public String update(Book book){
        bookService.updateBook(book);
        return "ok";
    }
}

说明：
在Spring MVC 中使用 @RequestMapping 来映射请求，
也就是通过它来指定控制器可以处理哪些URL请求。

11.findAll.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript">
        $(function () {
            showData();// 展示数据
        });
        function showData() {
            $.ajax({
               url: "http://localhost:8080/findAll.do",
                // 前后端分离最好是写全了地址
               type: "post",
               data: { },
               dataType: "json",
               async: false,
               success:function (data) {
                    var str = "";
                    $.each(data,function (i) {
                        str +="<tr>";
                        str +="    <td>"+data[i].name+"</td>";
                        str +="    <td>"+data[i].author+"</td>";
                        str +="    <td>"+data[i].publish+"</td>";
                        str +="    <td>"+data[i].publishdate+"</td>";
                        str +="    <td>"+data[i].page+"</td>";
                        str +="    <td>"+data[i].price+"</td>";
                        str +="    <td>"+data[i].content+"</td>";
                        str +="    <td></td>";
                        str +="</tr>";
                        /**
                         * 上面这段话，可以先在下面写了，然后复制进去
                         * alt键 快速选中多个 鼠标向下移
                         * 复制的时候也是用alt键选中 然后在cv 在进行alt 不要直接选中
                         * 有map   上诉的属性和数据库的相对应 不是实体类 */
                    });
                   $("table").append(str);
               },
               error:function () {}
            });
        }
    </script>
</head>
<body>
    <table border="1px solid">
        <tr><th colspan="8">查询列表页面</th></tr>
        <tr>
            <td>书名</td>
            <td>作者</td>
            <td>出版社</td>
            <td>发布日期</td>
            <td>总页数</td>
            <td>价格</td>
            <td>内容</td>
            <td>操作</td>
        </tr>
    </table>
</body>
</html>

结果：
http://localhost:8080/findAll.html

12.findAllByPage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript">
        $(function () {
            showData(1);//默认为 1
        });
        function showData(pageNo) {
            $.ajax({
               url: "http://localhost:8080/findAllByPage.do",
               type: "post",
               data: {"pageNo":pageNo,"name":$("[name=name]").val()},
               dataType: "json",
               async: false,
               success:function (data) {
                   $(".info").remove();
                    var str = "";
                    $.each(data.list,function (i) {
                        str +="<tr class='info'>";
                        str +="    <td>"+data.list[i].name+"</td>";
                        str +="    <td>"+data.list[i].author+"</td>";
                        str +="    <td>"+data.list[i].publish+"</td>";
                        str +="    <td>"+data.list[i].publishdate+"</td>";
                        str +="    <td>"+data.list[i].page+"</td>";
                        str +="    <td>"+data.list[i].price+"</td>";
                        str +="    <td>"+data.list[i].content+"</td>";
                        str +="    <td>" +
                            "<a href='javascript:void(0)' οnclick='delBook("+data.list[i].id+")'>删除</a>" +
                            "<a href='update.html?id="+data.list[i].id+"'>修改</a></td>";
                        str +="</tr>";
                    });
                    str +="<tr class='info'>";
                    str +="    <td colspan='8'>";
                    str +="        <a href='javascript:void (0)' οnclick='showData(1)'>首页</a>";
                    str +="        <a href='javascript:void (0)' οnclick='showData("+data.prePage+")'>上一页</a>";
                    str +="        <a href='javascript:void (0)' οnclick='showData("+data.nextPage+")'>下一页</a>";
                    str +="        <a href='javascript:void (0)' οnclick='showData("+data.pages+")'>末页</a>";
                    str +="    </td>";
                    str +="</tr>";
                   $("table").append(str);
               },
               error:function () {}
            });
        }
        function delBook(id) {
            // var flag = confirm("确认删除吗?");
            // if(flag>0){
            // alert(id);
            $.ajax({
                url: "http://localhost:8080/delById.do",
                type: "post",
                data: {"id": id},//json格式 对象  如果前面不写RequestBody 浏览器也会自动解析 把Integer id解析
                dataType: "text",
                async: false,
                success: function (data) {
                    // alert("1234");
                    if (data == "ok") {
                        window.location.href = "findAllByPage.html";
                    }
                },
                error: function () {
                }
            })
        // }
        }
    </script>
</head>
<body>
    <table border="1px solid">
        <tr><th colspan="8">查询列表页面</th></tr>
        <tr>
            <td colspan="8">
                <input type="text" name="name" />
                <input type="button" value="书籍名称查询" onclick="showData(1)">
            </td>
        </tr>
        <tr>
            <td>书名</td>
            <td>作者</td>
            <td>出版社</td>
            <td>发布日期</td>
            <td>总页数</td>
            <td>价格</td>
            <td>内容</td>
            <td>操作</td>
        </tr>
<!--        拼接所以用单引号  info是为了清空-->
<!--        <tr class='info'>-->
<!--            <td colspan="8">-->
<!--                <a href='javascript:void (0)' οnclick='showData(1)'>首页</a>-->
<!--                <a href='javascript:void (0)' οnclick='showData("+data.prePage+")'>上一页</a>-->
<!--                <a href='javascript:void (0)' οnclick='showData("+data.nextPage+")'>下一页</a>-->
<!--                <a href='javascript:void (0)' οnclick='showData("+data.pages+")'>末页</a>-->
<!--            </td>-->
<!--        </tr>-->
        <!--javascript:void (0)防止乱跳      可以用lastPage 也可以用pages pages被划掉说明有更好的方法-->
    </table>
</body>
</html>

结果：
http://localhost:8080/findAllByPage.html

13.add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript">
        // 注意点 大写小 要统一 实体类和数据库  用序列化的话 并且用序列化必须写form
        function cc() {
            $.ajax({
                url: "http://localhost:8080/add.do",
                type: "post",
                data: $("form").serialize(),
                // serialize 所有的name属性都会封装成对象 后台会直接获取  实体类要序列化
  //         data: {"name":$("[name=name]").val(),"author":$("[name=author]").val()},XXXXXX,
                dataType: "text",
                // 字符串
                async: false,
                success: function (data) {
                    if (data == "ok") {
                        window.location.href = "findAllByPage.html"
                    }
                },
                error: function () { }
            })
        }
    </script>
</head>
<body>
    <form>
        <table border="1px solid">
            <tr>
                <td>书名</td>
                <td>
                    <input type="text" name="name" />
                </td>
            </tr>
            <tr>
                <td>作者</td>
                <td>
                    <input type="text" name="author" />
                </td>
            </tr>
            <tr>
                <td>出版社</td>
                <td>
                    <input type="text" name="publish" />
                </td>
            </tr>
            <tr>
                <td>发布日期</td>
                <td>
                    <input type="date" name="publishdate" />
                </td>
            </tr>
            <tr>
                <td>总页数</td>
                <td>
                    <input type="text" name="page" />
                </td>
            </tr>
            <tr>
                <td>价格</td>
                <td>
                    <input type="text" name="price" />
                </td>
            </tr>
            <tr>
                <td>内容</td>
                <td>
                    <input type="text" name="content" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <input type="button" value="提交" onclick="cc()">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

结果：

14.update.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript">
        $(function () {
            var id = /\d+$/.exec(location.search)[0];
            // var  reg = /表达式/附加参数  $ 匹配字符串的 结束
            // \d 匹配一个数字字符，等价于[0 - 9]
            // exec()  检索字符中是正则表达式的区配，返回找到的值，并确定其位置 返回的是一个数组 所以获取0
            $.ajax({
                url: "http://localhost:8080/findById.do",
                type: "post",
                data: {"id":id},
                dataType: "json",
                async: false,//如果一个里有两个ajax 就必须要这个啊
                success: function (data) {
                    $("[name=id]").val(data.id);
                    $("[name=name]").val(data.name);
                    $("[name=author]").val(data.author);
                    $("[name=publish]").val(data.publish);
                    $("[name=publishdate]").val(data.publishdate);
                    $("[name=page]").val(data.page);
                    $("[name=price]").val(data.price);
                    $("[name=content]").val(data.content);
                },
                error: function () {}
            })
        })
        function update() {
            $.ajax({
                url: "http://localhost:8080/update.do",
                type: "post",
                data: $("form").serialize(),
                dataType: "text",
                async: false,
                success: function (data) {
                    if (data == "ok"){
                        window.location.href="findAllByPage.html";
                    }
                },
                error: function () {}
            })
        }
    </script>
</head>
<body>
<form>
    <table border="1px solid">
        <input type="hidden" name="id">
        <tr>
            <td>书名</td>
            <td>
                <input type="text" name="name" />
            </td>
        </tr>
        <tr>
            <td>作者</td>
            <td>
                <input type="text" name="author" />
            </td>
        </tr>
        <tr>
            <td>出版社</td>
            <td>
                <input type="text" name="publish" />
            </td>
        </tr>
        <tr>
            <td>发布日期</td>
            <td>
                <input type="date" name="publishdate" />
            </td>
        </tr>
        <tr>
            <td>总页数</td>
            <td>
                <input type="text" name="page" />
            </td>
        </tr>
        <tr>
            <td>价格</td>
            <td>
                <input type="text" name="price" />
            </td>
        </tr>
        <tr>
            <td>内容</td>
            <td>
                <input type="text" name="content" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <input type="button" value="提交" onclick="update()">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

结果：
http://localhost:8080/findAllByPage.html

上点击书名lj修改就会跳到
http://localhost:8080/update.html?id=4

进行修改就可以了。

15.附注

常见的三种json操作工具：
jackson,gson,fastjson

16.拓展

mybatis 配置中遇到的坑之二_qioutiandeyun的博客-CSDN博客
https://blog.csdn.net/qioutiandeyun/article/details/76747150

pagehelper dialect 支持哪些数据库_百度知道 (baidu.com)
https://zhidao.baidu.com/question/757630544346753444.html

@ResponseBody注解使用（返回字符串并不跳转） - AlexLiuF - 博客园 (cnblogs.com)
https://www.cnblogs.com/alexliuf/p/13967249.html

responseBody注解可以直接返回字符串 && springMVC Controller get请求返回字符串是中文乱码解决 - 戈博折刀 - 博客园 (cnblogs.com)
https://www.cnblogs.com/libin6505/p/9805853.html

@ResponseBody返回4种数据格式的数据_人生几度秋凉-CSDN博客_responsebody返回字符串
https://blog.csdn.net/weixin_42189604/article/details/82179660

----2021.12.18&12.21&12.22