DAY10_SpringBoot—SpringMVC重定向和转发&RestFul风格&JSON格式&SSM框架整合&Ajax-JQuery

Mr_sun.2024-01-29 9:03

目录

  • [1 SpringMVC](#1 SpringMVC)
    • [1.1 重定向和转发](#1.1 重定向和转发)
      • [1.1.1 转发](#1.1.1 转发)
      • [1.1.2 重定向](#1.1.2 重定向)
      • [1.1.3 转发练习](#1.1.3 转发练习)
      • [1.1.4 重定向练习](#1.1.4 重定向练习)
      • [1.1.5 重定向/转发特点](#1.1.5 重定向/转发特点)
      • [1.1.6 重定向/转发意义](#1.1.6 重定向/转发意义)
    • [1.2 RestFul风格](#1.2 RestFul风格)
      • [1.2.1 RestFul入门案例](#1.2.1 RestFul入门案例)
      • [1.2.2 简化业务调用](#1.2.2 简化业务调用)
    • [1.3 JSON](#1.3 JSON)
      • [1.3.1 JSON介绍](#1.3.1 JSON介绍)
      • [1.3.2 JSON格式](#1.3.2 JSON格式)
        • [1.3.2.1 Object格式](#1.3.2.1 Object格式)
        • [1.3.2.2 Array格式](#1.3.2.2 Array格式)
        • [1.3.2.3 嵌套格式](#1.3.2.3 嵌套格式)
    • [1.4 SpringMVC使用JSON返回数据](#1.4 SpringMVC使用JSON返回数据)
      • [1.4.1 意义](#1.4.1 意义)
      • [1.4.2 @ResponseBody注解](#1.4.2 @ResponseBody注解)
      • [1.4.2 @RestController](#1.4.2 @RestController)
  • [2 SpringBoot整合SSM](#2 SpringBoot整合SSM)
    • [2.1 创建项目springboot_demo_4](#2.1 创建项目springboot_demo_4)
    • [2.2 编辑pom.xml文件](#2.2 编辑pom.xml文件)
    • [2.2 编辑yml配置文件](#2.2 编辑yml配置文件)
    • [2.3 编辑User](#2.3 编辑User)
    • [2.4 编辑UserMapper](#2.4 编辑UserMapper)
    • [2.5 编辑UserService/UserServiceImpl](#2.5 编辑UserService/UserServiceImpl)
    • [2.6 编辑UserController](#2.6 编辑UserController)
    • [2.7 编辑userList.html页面](#2.7 编辑userList.html页面)
    • [2.8 页面效果展现](#2.8 页面效果展现)
    • [2.9 RestFul策略优化](#2.9 RestFul策略优化)
  • [3 jQuery实现数据获取](#3 jQuery实现数据获取)
    • [3.1 业务说明](#3.1 业务说明)
    • [3.2 jQuery下载](#3.2 jQuery下载)
    • [3.3 Ajax介绍](#3.3 Ajax介绍)
      • [3.3.1 Ajax特点](#3.3.1 Ajax特点)
      • [3.3.2 Ajax异步原理](#3.3.2 Ajax异步原理)
    • [3.4 关于JS 循环遍历的写法](#3.4 关于JS 循环遍历的写法)
    • [3.5 编辑页面JS](#3.5 编辑页面JS)
    • [3.6 编辑UserController](#3.6 编辑UserController)
    • [3.7 页面效果调用](#3.7 页面效果调用)
    • [3.8 关于常见Ajax种类介绍](#3.8 关于常见Ajax种类介绍)
      • [3.8.1 带参数的请求](#3.8.1 带参数的请求)
      • [3.8.2 post请求结构](#3.8.2 post请求结构)
      • [3.8.3 getJSON类型](#3.8.3 getJSON类型)
      • [3.8.4 .ajax类型](#3.8.4 .ajax类型)
    • [3.9 请求类型说明](#3.9 请求类型说明)
      • [3.9.1 get请求](#3.9.1 get请求)
      • [3.9.2 POST](#3.9.2 POST)

1 SpringMVC

1.1 重定向和转发

1.1.1 转发

由服务器内部进行页面的跳转

一般情况下 SpringMVC内部 以转化为主

1.1.2 重定向

当用户发起请求时,由服务器返回有效的网址信息.之后由用户再次发起请求的结构

1.1.3 转发练习

java 复制代码 
/**
    * 测试转发和重定向
    * 1.准备一个请求 findUser请求
    * 2.要求转发到 findDog请求中
    * 3.关键字   forward: 转发的是一个请求.....
    * 4.特点:    转发时 会携带用户提交的数据，用户浏览器地址不会发生改变
    * 5.转发的意义:
    *      如果直接转向到页面中,如果页面需要额外的参数处理,则没有执行.
    *      如果在该方法中添加业务处理,则方法的耦合性高.不方便后续维护
    *      所以方法应该尽可能松耦合
*/
@RequestMapping("/findUser")
public String findUser(String name) {
    //return 本身就是一个转发
    //return "dog"; 页面耦合性高
    return "forward:/findDog";
}

//需要将name属性返回给页面
@RequestMapping("/findDog")
public String findDog(String name, Model model) {
    System.out.println("动态获取name属性值:" + name);
    model.addAttribute("name", name + "旺旺旺");
    return "dog";
}
html 复制代码 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>转发与重定向练习</title>
</head>
<body>
    <h1>我是Dog页面</h1>
    <!--动态获取服务器数据-->
    <h3 th:text="${name}"></h3>
</body>
</html>
  • 运行结果


1.1.4 重定向练习

java 复制代码 
/**
     * 测试重定向
     * 1.准备一个请求 findUser请求
     * 2.要求重定向到 findDog请求中
     * 3.关键字    redirect：多次请求多次响应
     * 4.特点:    重定向时 不会携带用户的数据，用户的浏览器的地址会发生变化
     * 5.重定向的意义:
     * 		实现了内部方法的松耦合
     */
    @RequestMapping("/findUser")
    public String findUser2(String name) {
        return "redirect:/findDog";
    }

    //需要将name属性返回给页面
    @RequestMapping("/findDog")
    public String findDog2(String name, Model model) {
        System.out.println("动态获取name属性值:" + name);
        model.addAttribute("name", name + "旺旺旺");
        return "dog";
    }
  • 运行结果


1.1.5 重定向/转发特点

  • 转发 forward
    • 会携带用户提交的数据
    • 用户浏览器的地址不会发生改变
  • 重定向 redirect
    • 由于是多次请求,所以不会携带用户的数据
    • 由于是多次请求,所以用户的浏览器的地址会发生变化

1.1.6 重定向/转发意义

  • 实现了方法内部的松耦合
    • 如果需要携带参数 使用转发
    • 如果一个业务已经完成需要一个新的开始则使用重定向

1.2 RestFul风格

1.2.1 RestFul入门案例

java 复制代码 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class RestFulController {

    /**
     * 常规get请求:
     * url地址: http://localhost:8090/restFul?id=1&name=tom
     * get请求弊端: 如果参数有多个,则key-value的结构需要多份.
     * RestFul结构:
     *  url地址: http://localhost:8090/restFul/{id}/{name}
     *      1.参数之间使用/分割
     *      2.参数的位置一旦确定,不可更改
     *      3.参数使用{}号的形式进行包裹,并且设定形参
     *      4.在接收参数时,使用特定的注解取值@PathVariable
     *
     * @PathVariable: 参数说明
     *      1.name/value  动态接收形参的数据  如果参数相同则省略不写
     *      2.必填项 required 默认为true
     */
    @RequestMapping("/restFul/{id}/{name}")
    public String restFul(@PathVariable Integer id,@PathVariable String name){
        System.out.println("获取参数:"+id+"|"+name);
        return "success";
    }
}
  • 运行结果


1.2.2 简化业务调用

  • 按照常规说明执行增删改查的操作需要多个业务方法
    • 新增用户 /insertUser
    • 修改用户 /updateUser
    • 删除用户 /deleteUser
    • 查询用户 /selectUser

上述的操作在早期这么写没有问题.但是新的请求规范规定应该让请求尽可能变成无状态的请求.(删除动词)

  • 常见请求类型: 1.GET 2.POST 3.PUT 4.DELETE
  • 优化:
    • 新增用户 /user 请求类型: POST
    • 修改用户 /user 请求类型: PUT
    • 删除用户 /user 请求类型: DELETE
    • 查询用户 /user 请求类型: GET

优化注解:

  • 总结:
    • 利用RestFul 可以简化get请求类型
    • 利用RestFul可以使用无状态的请求,通过不同的请求类型 控制不同的业务逻辑(较为常用)

1.3 JSON

1.3.1 JSON介绍

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式(字符串)。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。

1.3.2 JSON格式

1.3.2.1 Object格式

对象（object） 是一个无序 的"'名称/值'对"集合。一个对象以"{"（左括号）开始，"}"（右括号）结束。每个"名称"后跟一个":"（冒号）；"'名称/值' 对"之间使用","（逗号）分隔。

json 复制代码 
{"key1":"value1","key2":"value2"}
1.3.2.2 Array格式

数组（array） 是值（value）的有序集合。一个数组以"["（左中括号）开始，"]"（右中括号）结束。值之间使用","（逗号）分隔。

json 复制代码 
["value1","value2","value3"]
1.3.2.3 嵌套格式

值（value） 可以是双引号括起来的 字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

json 复制代码 
[true,false,{"id":100,"name":"tomcat","hobbys":["敲代码","玩游戏","找对象",{"username":"admin","password":"123456"}]}]

1.4 SpringMVC使用JSON返回数据

1.4.1 意义

现阶段一般的请求都是前后端分离的方式ajax (jQuery/Axios),一般向服务器请求的数据通常详情下都是采用JSON串的方式返回.

1.4.2 @ResponseBody注解

java 复制代码 
import com.jt.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class JSONController {
    /**
     * 需求: 要求根据getJSON的请求,获取User对象的JSON数据.
     * 用法: 如果需要返回JOSN数据则使用注解@ResponseBody
     * 知识点讲解:
     *      返回的对象之后,SpringMVC通过内部API(ObjectMapper)
     *      调用对象的getXXX()方法动态的获取属性和属性值.
     *  演化规则:
     *      getAge() ~~~~~去掉get首字母~~~~~Age()
     *      ~~~~~~首字母小写~~~~~age()~~~~获取属性age
     *      ~~~~~通过getAge() 动态获取属性的值
     *
     *  JSON: {"age": "今年18岁!!!"}
     *  注意事项:
     *      必须添加get/set方法
     */
    @RequestMapping("/getJSON")
    @ResponseBody //返回值就是一个JSON串
    public User getJSON(){
        User user = new User();
        user.setId(1000).setName("JSON测试");
        return user; //不需要执行视图解析器
    }
}
  • 运行结果

1.4.2 @RestController

2 SpringBoot整合SSM

  • Spring
  • SpringMVC
  • Mybatis-plus

2.1 创建项目springboot_demo_4


2.2 编辑pom.xml文件

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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <!--引入父级工程-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.1.8</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.jt</groupId>
    <artifactId>springboot_demo_4</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot_demo_4</name>
    <description>springboot_demo_4</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <!--引入jdbc包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!--thymeleaf导入模版工具类-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--SpringMVCjar包文件-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--热部署工具-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <!--lombok插件-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!--测试包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--引入数据库驱动 -->
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!--spring整合mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.5</version>
        </dependency>
    </dependencies>
    <!--负责项目打包部署-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <image>
                        <builder>paketobuildpacks/builder-jammy-base:latest</builder>
                    </image>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

2.2 编辑yml配置文件

yml 复制代码 
server:
  port: 8090

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/jtadmin?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: root

  #整合SpringMVC
  thymeleaf:
    #设置页面前缀
    prefix: classpath:/templates/
    #设置页面后缀
    suffix: .html
    #是否使用缓存
    cache: false

mybatis-plus:
  type-aliases-package: com.jt.pojo
  mapper-locations: classpath:/mappers/*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true

#添加MP日志  打印执行的sql
logging:
  level:
    com.jt.mapper: debug

2.3 编辑User

java 复制代码 
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;

import java.io.Serializable;

@Data
@Accessors(chain = true)
@TableName("demo_user")  //保证数据安全性和有效性必须序列化
public class User implements Serializable {
    @TableId(type = IdType.AUTO) //主键自增
    private Integer id;
    private String name;
    private Integer age;
    private String sex;
}

2.4 编辑UserMapper

java 复制代码 
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.User;

public interface UserMapper extends BaseMapper<User> {

}

2.5 编辑UserService/UserServiceImpl

java 复制代码 
import com.jt.pojo.User;
import java.util.List;

public interface UserService {
    List<User> findAll();
}
java 复制代码 
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService{
    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> findAll() {
        return userMapper.selectList(null);
    }
}

2.6 编辑UserController

java 复制代码 
/**
 * 查询所有的用户列表数据,在userList.html中展现数据
 */
@RequestMapping("/userList")
public String userList(Model model){
    //1.查询业务层获取数据
    List<User> userList = userService.findAll();
    //2.将数据保存到Model对象中返回给页面
    model.addAttribute("userList",userList);
    return "userList";
}

2.7 编辑userList.html页面

html 复制代码 
<!DOCTYPE html>
<!--导入模板标签!!!!!-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表数据</title>
</head>
<body>
<!--准备一个表格-->
<table border="1px" align="center" width="800px">
    <tr align="center">
        <td colspan="4"><h3>用户列表</h3></td>
    </tr>
    <tr align="center">
        <td>ID</td>
        <td>名称</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <!--1.页面通过request对象 动态的获取userList数据 之后tr展现-->
    <tr align="center" th:each="user : ${userList}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.age}"></td>
        <td th:text="${user.sex}"></td>
    </tr>
</table>
</body>
</html>

2.8 页面效果展现

2.9 RestFul策略优化

java 复制代码 
import com.jt.pojo.User;

import java.util.List;

public interface UserService {
    List<User> findAll();

    void insertUser(User user);

    void updateUser(User user);

    void deleteUserById(Integer id);
}
java 复制代码 
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserMapper userMapper;


    @Override
    public List<User> findAll() {

        return userMapper.selectList(null);
    }

    @Override
    public void insertUser(User user) {
        //MP的方式实现入库
        userMapper.insert(user);
    }

    @Override
    public void updateUser(User user) {
        userMapper.updateById(user);
    }

    @Override
    public void deleteUserById(Integer id) {
        userMapper.deleteById(id);
    }
}
java 复制代码 
import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/demo")
    @ResponseBody
    public String demo(){
        return "框架整合初步完成";
    }

    /**
     * 查询所有的用户列表数据,在userList.html中展现数据
     */
    @RequestMapping("/userList")
    public String userList(Model model){
        //1.查询业务层获取数据
        List<User> userList = userService.findAll();
        //2.将数据保存到Model对象中返回给页面
        model.addAttribute("userList",userList);
        return "userList";
    }

    /**
     * 需求: 利用restFul实现用户数据新增
     *       新增之后重定向到userList.html页面
     * URL地址: /user/tom/18/男
     * 优化策略:
     *      1.如果有多个参数提交,则可以使用对象接收,但是要求
     *      参数名称必须与属性名称一致
     */
    @RequestMapping("/user/{name}/{age}/{sex}")
    public String insertUser(User user){
        userService.insertUser(user);
        return "redirect:/userList";
    }

    @RequestMapping("/user/{id}/{name}")
    public String updateUser(User user){
        userService.updateUser(user);
        return "redirect:/userList";
    }

    @RequestMapping("/user/{id}")
    public String deleteUser(@PathVariable Integer id){
        userService.deleteUserById(id);
        return "redirect:/userList";
    }
}

3 jQuery实现数据获取

3.1 业务说明

准备userAjax页面

html 复制代码 
<!DOCTYPE html>
<!--导入模板标签!!!!!-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表数据</title>
</head>
<body>
<!--准备一个表格-->
<table border="1px" align="center" width="800px">
    <tr align="center">
        <td colspan="4"><h3>用户列表</h3></td>
    </tr>
    <tr align="center">
        <td>ID</td>
        <td>名称</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
</table>
</body>
</html>
  • 通过ajax请求向后端服务器获取数据,并且在页面中展现数据
    • 这就是今天所要学习的

3.2 jQuery下载

官网：https://jquery.com/


  • 在项目中的存放位置

3.3 Ajax介绍

3.3.1 Ajax特点

  • 局部刷新-异步访问
    • 同步:
      • 当用户发起请求时,如果这时服务器正忙
      • 那么用户处于等待的状态,同时不可以做其他的操作
    • 异步:
      • 当用户发起请求时,如果遇到服务器正忙
      • 这时用户可以继续执行后续的操作.同时通过回调函数与服务器沟通

3.3.2 Ajax异步原理

  • 常规同步的调用方式
  • Ajax异步调用
    • Ajax通过Ajax引擎实现异步的调用.当后台的服务器响应数据之后,通过预先设置好的回调函数进行数据的展现

3.4 关于JS 循环遍历的写法

js 复制代码 
1.常规for循环
for(var i=0;i<result.length;i++){
	var user = result[i];
	console.log(user)
}
			  
2.使用in的关键字
//关键字 in index 代表遍历的下标
for(index in result){
	var user = result[index]
	console.log(user)
}
			 
3.使用of关键字
for(user of result){
	console.log(user)
}

3.5 编辑页面JS

html 复制代码 
<!DOCTYPE html>
<!--导入模板标签!!!!!-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表数据</title>
    <!--
        1.引入函数类库
        2.使用模板工具类中的静态资源文件默认的路径都在static目录下
            所以引入jq的时候，../static可以不写，直接写绝对路径
    -->
    <script src="/jquery-3.6.0.js"></script>
    <!--type="text/javascript" 新版本可以省略了-->
    <script>
        //1.jQuery中有一种编程思想 函数式编程
        $(function () {
            //让整个页面加载完成之后再次执行,以后所有的操作都应该在函数内完成

            /**
             * 常见Ajax用法
             *    1.$.get(url地址，提交数据，回调函数，返回值类型)
             *    2.$.post(url地址，提交数据，回调函数，返回值类型)
             */

            /**
             * 业务需求:要求向后端服务器发起请求 /findAjaxUser,之后将返回值结果 进行页面解析
             */
            $.get("/findAjaxUser", function (result) {
                //1.result是服务器返回的结果 [{},{},{}....}]
                //2.将返回值结果进行循环遍历
                for(user of result){
                	//3.获取对象的属性值
                    var id = user.id
                    var name = user.name
                    var age = user.age
                    var sex = user.sex
                    var tr = "<tr align='center'><td>"+ id +"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
                    //4.选中id=userTable的元素
                    //5.之后追加数据append(追加的内容)
                    $("#userTable").append(tr)
                }
                /**
                 * for循环的写法
                 *   1.常规for循环
                 *   for(var i = 0;i<result.length;i++){
                 *      var user = result[i];
                 *      console.log(user)
                 *  }
                 *
                 *  2.使用in的关键字
                 *  //in  index代表遍历的下标
                 *  for(index in result){
                 *     var user = result[index]
                 *     console.log(user)
                 *  }
                 *
                 *  3.使用of关键字
                 * for(user of result){
                 *    console.log(user)
                 * }
                 */

            })
        })
    </script>
</head>
<body>
<!--准备一个表格-->
<table id="userTable" border="1px" align="center" width="800px">
    <tr align="center">
        <td colspan="4"><h3>用户列表</h3></td>
    </tr>
    <tr align="center">
        <td>ID</td>
        <td>名称</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
</table>
</body>
</html>

3.6 编辑UserController

根据前端ajax请求.处理业务

java 复制代码 
import com.jt.pojo.User;
import com.jt.service.UserService;
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.ResponseBody;

import java.util.List;

@Controller
public class AjaxController {
    @Autowired
    private UserService userService;

    /**
     * 要求跳转到userAjax页面中
     */
    @RequestMapping("/userAjax")
    public String userAjax() {
        return "userAjax";
    }

    /**
     * 接受Ajax请求 /findAjaxUser
     * 返回值结果：Json字符串
     */
    @RequestMapping("/findAjaxUser")
    @ResponseBody
    public List<User> findAjaxUser(){
        return userService.findAll();
    }
}

3.7 页面效果调用

3.8 关于常见Ajax种类介绍

3.8.1 带参数的请求

  • 字符串拼接
js 复制代码 
/**
* 带参数的ajax请求
* 参数说明：
* 	key=value&key2=value2....
*	例如: id=1&name=tom
*/
$.get("/findAjaxUser", 'id=1&name=tom', function (result) {
	console.log("带参数请求，字符串拼接")
})
  • js对象的写法
js 复制代码 
/**
* 带参数的ajax请求
* 参数说明：
* 	{key:value,key2:value2,....}
*	例如: {id:1,name:tom}
*/
$.get("/findAjaxUser", {id:1,name:tom}, function (result) {
	console.log("带参数请求，js对象写法")
})

3.8.2 post请求结构

js 复制代码 
/**
* post请求
*/
$.post('/findAjaxUser',{id:3,name:'post请求'},function (result) {
	console.log('post请求成功')
})


3.8.3 getJSON类型

js 复制代码 
/**
* getJSON类型
* 要求返回值都是json类型
*/
$.getJSON('/findAjaxUser',{id:4,name:'getJSON类型'},function (result) {
	console.log('getJSON请求成功')
})


3.8.4 $.ajax类型

js 复制代码 
/**
	* 最为基本的ajax请求方式
*/
$.ajax({
	type: "put",                         //请求的类型
	url: '/findAjaxUser',                //请求的路径
	data: {id:5,name:'ajax基本请求方式'}, //请求的参数
	//成功之后回调函数
	success: function (result) {
		console.log('ajax基本请求方式成功')//成功回调
	},
	error: function (result) {
		console.log('ajax基本请求方式失败')//失败回调
	}
})


3.9 请求类型说明

3.9.1 get请求

  • 会将参数通过?号的形式进行拼接. http://localhost:8090/findUser?id=1\&password=123456
  • get请求会将所有的参数动态的拼接到URL中,相对不安全.
  • Get请求不适用于大量的数据提交 各大的浏览器对于Get请求一般都是有上限的.
    • 总结:
      • 查询数据时使用
      • 获取简单数据时使用(页面/JS/CSS...)
      • 一般请求（查询）中GET请求居多

3.9.2 POST

  • POST请求将所有的参数都会进行form的封装
  • 如果需要传递海量的数据,则首选POST
  • POST的请求使用form进行封装,相对于GET请求更加的安全
    • 总结:
      • 提交海量的数据时使用
      • 一般提交文件时使用
      • 提交方式使用POST居多
相关推荐
二哈喇子！43 分钟前
SpringBoot项目右上角选择ProjectNameApplication的配置
java·spring boot
二哈喇子！1 小时前
基于Spring Boot框架的车库停车管理系统的设计与实现
java·spring boot·后端·计算机毕业设计
二哈喇子！1 小时前
基于SpringBoot框架的水之森海底世界游玩系统
spring boot·旅游
二哈喇子！1 小时前
Java框架精品项目【用于个人学习】
java·spring boot·学习
二哈喇子！2 小时前
基于SpringBoot框架的网上购书系统的设计与实现
java·大数据·spring boot
二哈喇子！3 小时前
基于JavaSE的淘宝卖鞋后端管理系统的设计与实现
java·spring boot·spring
Coder_Boy_3 小时前
基于SpringAI的在线考试系统-智能考试系统-学习分析模块
java·开发语言·数据库·spring boot·ddd·tdd
高山上有一只小老虎4 小时前
mybatisplus实现分页查询
java·spring boot·mybatis
毕设源码-朱学姐4 小时前
【开题答辩全过程】以 基于SpringBoot的律师事务所管理系统的设计与实现为例，包含答辩的问题和答案
java·spring boot·后端
毕设源码-朱学姐5 小时前
【开题答辩全过程】以 基于springboot的日用药品仓库管理系统的设计与实现为例，包含答辩的问题和答案
java·spring boot·后端
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03Claude Code Skills 实用使用手册04UV安装并设置国内源05在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）06BongoCat - 跨平台键盘猫动画工具07AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09Linux下V2Ray安装配置指南10Open Code教程（四）| 高级配置与集成