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居多
相关推荐
努力的家伙是不讨厌的2 小时前
解析json导出csv或者直接入库
开发语言·python·json
狂放不羁霸2 小时前
idea | 搭建 SpringBoot 项目之配置 Maven
spring boot·maven·intellij-idea
计算机学长felix3 小时前
基于SpringBoot的“校园交友网站”的设计与实现（源码+数据库+文档+PPT)
数据库·spring boot·毕业设计·交友
码农派大星。3 小时前
Spring Boot 配置文件
java·spring boot·后端
江深竹静，一苇以航3 小时前
springboot3项目整合Mybatis-plus启动项目报错：Invalid bean definition with name ‘xxxMapper‘
java·spring boot
豪宇刘4 小时前
SpringBoot+Shiro权限管理
java·spring boot·spring
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统（JAVA毕业设计）
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
2402_857589364 小时前
SpringBoot框架：作业管理技术新解
java·spring boot·后端
杨荧5 小时前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解