• (续)SSM整合之springmvc笔记(SpringMVC处理ajax请求)（P154-158）

    目录

    SpringMVC处理ajax请求

    一  准备工作

    1  新建spring_mvc_ajax     com.atguigu

    2 .导入依赖

    3 添加web模块

    4 .配置web.xml

    5 .  springmvc.xml

    6  .创建控制层 

     7 . index.html

     8  静态

    9 部暑到tomcat上 

    10  启动tomcat

     二 . 测试SpringMVC处理ajax

    1 . index.html

    2 .控制层

    3 .测试

    三  @RequestBody

    1 控制层

    2 测试

    四  @RequestBody获取json格式的请求参数

    1.  index.html

    2 .TestAjaxController

    3 . 导入jackson的依赖

    4 .创建实体类

    五    @ResponseBody

    1. index.html

    2. TestAjaxController

    六   @ResponseBody响应浏览器json数据

    实体类-->json对象

    1 .index.html

    2 .  控制层

    3 .测试

    map-->json对象

    1 .控制层

    2. 测试

    list-->json数组

    1 .控制层

    2. 测试

    七   @RestController注解

    总结

    SpringMVC处理ajax请求

    一  准备工作

    1  新建spring_mvc_ajax     com.atguigu

    2 .导入依赖

    war


    
    
        org.springframework
        spring-webmvc
        5.3.1
    

    
    
        ch.qos.logback
        logback-classic
        1.2.3
    

    
    
        javax.servlet
        javax.servlet-api
        3.1.0
        provided
    

    
    
        org.thymeleaf
        thymeleaf-spring5
        3.0.12.RELEASE
    

    
        com.fasterxml.jackson.core
        jackson-databind
        2.12.1
    

    
    
        commons-fileupload
        commons-fileupload
        1.3.1

    3 添加web模块

    src\main\webapp\

    D:\review_ssm\workspace\SSM\spring_mvc_ajax\src\main\webapp\WEB-INF\web.xml 

    4 .配置web.xml

    1. <filter>
    2.         <filter-name>CharacterEncodingFilterfilter-name>
    3.         <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
    4.         <init-param>
    5.             <param-name>encodingparam-name>
    6.             <param-value>UTF-8param-value>
    7.         init-param>
    8.         <init-param>
    9.             <param-name>forceEncodingparam-name>
    10.             <param-value>trueparam-value>
    11.         init-param>
    12.     filter>
    13.     <filter-mapping>
    14.         <filter-name>CharacterEncodingFilterfilter-name>
    15.         <url-pattern>/*url-pattern>
    16.     filter-mapping>
    17.  
    18.     <filter>
    19.         <filter-name>HiddenHttpMethodFilterfilter-name>
    20.         <filter-class>org.springframework.web.filter.HiddenHttpMethodFilterfilter-class>
    21.     filter>
    22.     <filter-mapping>
    23.         <filter-name>HiddenHttpMethodFilterfilter-name>
    24.         <url-pattern>/*url-pattern>
    25.     filter-mapping>
    26.     
    27.     <servlet>
    28.         <servlet-name>SpringMVCservlet-name>
    29.         <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
    30.         <init-param>
    31.             <param-name>contextConfigLocationparam-name>
    32.             <param-value>classpath:springmvc.xmlparam-value>
    33.         init-param>
    34.         <load-on-startup>1load-on-startup>
    35.     servlet>
    36.     <servlet-mapping>
    37.         <servlet-name>SpringMVCservlet-name>
    38.         <url-pattern>/url-pattern>
    39.     servlet-mapping>

    5 .  springmvc.xml

    1. "1.0" encoding="UTF-8"?>
    2. <beans xmlns="http://www.springframework.org/schema/beans"
    3.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4.        xmlns:context="http://www.springframework.org/schema/context"
    5.        xmlns:mvc="http://www.springframework.org/schema/mvc"
    6.        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">
    7.  
    8.     
    9.     <context:component-scan base-package="com.atguigu.controller">context:component-scan>
    10.  
    11.     
    12.     <bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
    13.         <property name="order" value="1"/>
    14.         <property name="characterEncoding" value="UTF-8"/>
    15.         <property name="templateEngine">
    16.             <bean class="org.thymeleaf.spring5.SpringTemplateEngine">
    17.                 <property name="templateResolver">
    18.                     <bean class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
    19.                         
    20.                         <property name="prefix" value="/WEB-INF/templates/"/>
    21.                         
    22.                         <property name="suffix" value=".html"/>
    23.                         <property name="templateMode" value="HTML5"/>
    24.                         <property name="characterEncoding" value="UTF-8" />
    25.                     bean>
    26.                 property>
    27.             bean>
    28.         property>
    29.     bean>
    30.  
    31.     
    32.     <mvc:default-servlet-handler />
    33.  
    34.     
    35.     <mvc:annotation-driven />
    36.  
    37.     
    38.     <mvc:view-controller path="/" view-name="index">mvc:view-controller>
    39.  
    40. beans>

    6  .创建控制层 

    1. @Controller
    2. public class TestAjaxController {
    3.  
    4. }

     7 . index.html

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>首页title>
    6. head>
    7. <body>
    8.     <h1>index.htmlh1>
    9. body>
    10. html>

     8  静态

    9 部暑到tomcat上 

     

    10  启动tomcat

     

     二 . 测试SpringMVC处理ajax

    1 . index.html

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>首页title>
    6. head>
    7. <body>
    8. <div id="app">
    9.     <h1>index.htmlh1>
    10.     <input type="button" value="测试SpringMVC处理ajax" @click="testAjax()"><br>
    11. div>
    12.  
    13. <script type="text/javascript" th:src="@{/js/vue.js}">script>
    14. <script type="text/javascript" th:src="@{/js/axios.min.js}">script>
    15. <script type="text/javascript">
    16.  
    17.     /**
    18.      * axios({
    19.            url:"",//请求路径
    20.            method:"",//请求方式
    21.            //以name=value&name=value的方式发送的请求参数
    22.            //不管使用的请求方式是get或post，请求参数都会被拼接到请求地址后
    23.            //此种方式的请求参数可以通过request.getParameter()获取
    24.            params:{},
    25.            //以json格式发送的请求参数
    26.            //请求参数会被保存到请求报文的请求体传输到服务器
    27.            //此种方式的请求参数不可以通过request.getParameter()获取
    28.            data:{}
    29.        }).then(response=>{
    30.            console.log(response.data);
    31.        });
    32.      */
    33.  
    34.     var vue = new Vue({
    35.         el:"#app",
    36.         methods:{
    37.             testAjax(){
    38.                 axios.post(
    39.                     "/springmvc/test/ajax?id=1001",
    40.                     {username:"admin",password:"123456"}
    41.                 ).then(response=>{
    42.                     console.log(response.data);
    43.                 });
    44.             }
    45.         }
    46.     });
    47. script>
    48. body>
    49. html>

    2 .控制层

    1. @Controller
    2. public class TestAjaxController {
    3.  
    4.     @RequestMapping("/test/ajax")
    5.     public void testAjax(Integer id,  HttpServletResponse response) throws IOException {
    6.         System.out.println("id:"+id);
    7.         response.getWriter().write("hello,axios");
    8.     }
    9.  
    10.  
    11.  
    12. }

    3 .测试

    三  @RequestBody

    @RequestBody 可以获取请求体信息，使用 @RequestBody 注解标识控制器方法的形参，当前请求的请求体就会为当前注解所标识的形参赋值

    1 控制层

    1.     @RequestMapping("/test/ajax")
    2.     public void testAjax(Integer id, @RequestBody String requestBody, HttpServletResponse response) throws IOException {
    3.         System.out.println("requestBody:"+requestBody);
    4.         System.out.println("id:"+id);
    5.         response.getWriter().write("hello,axios");
    6.     }

    2 测试

    四  @RequestBody获取json格式的请求参数

    在使用了 axios 发送 ajax 请求之后，浏览器发送到服务器的请求参数有两种格式：
    1 、 name=value&name=value... ，此时的请求参数可以通过 request.getParameter() 获取，对应
    SpringMVC 中，可以直接通过控制器方法的形参获取此类请求参数
    2 、 {key:value,key:value,...} ，此时无法通过 request.getParameter() 获取，之前我们使用操作
    json 的相关 jar 包 gson 或 jackson 处理此类请求参数，可以将其转换为指定的实体类对象或 map 集
    合。在 SpringMVC 中，直接使用 @RequestBody 注解标识控制器方法的形参即可将此类请求参数
    转换为 java 对象

    1.  index.html

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>首页title>
    6. head>
    7. <body>
    8. <div id="app">
    9.     <h1>index.htmlh1>
    10.     <input type="button" value="测试SpringMVC处理ajax" @click="testAjax()"><br>
    11.     <input type="button" value="使用@RequestBody注解处理json格式的请求参数" @click="testRequestBody()"><br>
    12. div>
    13.  
    14. <script type="text/javascript" th:src="@{/js/vue.js}">script>
    15. <script type="text/javascript" th:src="@{/js/axios.min.js}">script>
    16. <script type="text/javascript">
    17.  
    18.     /**
    19.      * axios({
    20.            url:"",//请求路径
    21.            method:"",//请求方式
    22.            //以name=value&name=value的方式发送的请求参数
    23.            //不管使用的请求方式是get或post，请求参数都会被拼接到请求地址后
    24.            //此种方式的请求参数可以通过request.getParameter()获取
    25.            params:{},
    26.            //以json格式发送的请求参数
    27.            //请求参数会被保存到请求报文的请求体传输到服务器
    28.            //此种方式的请求参数不可以通过request.getParameter()获取
    29.            data:{}
    30.        }).then(response=>{
    31.            console.log(response.data);
    32.        });
    33.      */
    34.  
    35.     var vue = new Vue({
    36.         el:"#app",
    37.         methods:{
    38.             testAjax(){
    39.                 axios.post(
    40.                     "/sprngMVC/test/ajax?id=1001",
    41.                     {username:"admin",password:"123456"}
    42.                 ).then(response=>{
    43.                     console.log(response.data);
    44.                 });
    45.             }
    46.         },
    47.         testRequestBody(){
    48.             axios.post(
    49.                 "/sprngMVC/test/RequestBody/json",
    50.                 {username:"admin",password:"123456",age:23,gender:"男"}
    51.             ).then(response=>{
    52.                 console.log(response.data);
    53.             });
    54.         }
    55.     });
    56. script>
    57. body>
    58. html>

    2 .TestAjaxController

    1.     @RequestMapping("/test/RequestBody/json")
    2.     public void testRequestBody(@RequestBody Map map, HttpServletResponse response) throws IOException {
    3.         System.out.println(map);
    4.         response.getWriter().write("hello,RequestBody");
    5.     }

    3 . 导入jackson的依赖

    
    com.fasterxml.jackson.core
    jackson-databind
    2.12.1

    4 .创建实体类

    1. package com.atguigu.pojo;
    2.  
    3. public class User {
    4.  
    5.     private Integer id;
    6.  
    7.     private String username;
    8.  
    9.     private String password;
    10.  
    11.     private Integer age;
    12.  
    13.     private String gender;
    14.  
    15.     public User() {
    16.     }
    17.  
    18.     public User(Integer id, String username, String password, Integer age, String gender) {
    19.         this.id = id;
    20.         this.username = username;
    21.         this.password = password;
    22.         this.age = age;
    23.         this.gender = gender;
    24.     }
    25.  
    26.     public Integer getId() {
    27.         return id;
    28.     }
    29.  
    30.     public void setId(Integer id) {
    31.         this.id = id;
    32.     }
    33.  
    34.     public String getUsername() {
    35.         return username;
    36.     }
    37.  
    38.     public void setUsername(String username) {
    39.         this.username = username;
    40.     }
    41.  
    42.     public String getPassword() {
    43.         return password;
    44.     }
    45.  
    46.     public void setPassword(String password) {
    47.         this.password = password;
    48.     }
    49.  
    50.     public Integer getAge() {
    51.         return age;
    52.     }
    53.  
    54.     public void setAge(Integer age) {
    55.         this.age = age;
    56.     }
    57.  
    58.     public String getGender() {
    59.         return gender;
    60.     }
    61.  
    62.     public void setGender(String gender) {
    63.         this.gender = gender;
    64.     }
    65.  
    66.     @Override
    67.     public String toString() {
    68.         return "User{" +
    69.                 "id=" + id +
    70.                 ", username='" + username + '\'' +
    71.                 ", password='" + password + '\'' +
    72.                 ", age=" + age +
    73.                 ", gender='" + gender + '\'' +
    74.                 '}';
    75.     }
    76. }

    测试

    五    @ResponseBody

    @ResponseBody 用于标识一个控制器方法，可以将该方法的返回值直接作为响应报文的响应体响应到浏览器

    1. index.html

    2. TestAjaxController

    1.  
    2.     @RequestMapping("/test/ResponseBody")
    3.     @ResponseBody
    4.     public String testResponseBody(){
    5.         return "success";
    6.     }
    3 测试

    六   @ResponseBody响应浏览器json数据

    服务器处理 ajax 请求之后，大多数情况都需要向浏览器响应一个 java 对象，此时必须将 java 对象转换为json 字符串才可以响应到浏览器，之前我们使用操作 json 数据的 jar 包 gson 或 jackson 将 java 对象转换为 json 字符串。在 SpringMVC 中，我们可以直接使用 @ResponseBody 注解实现此功能

    实体类-->json对象

    1 .index.html

    2 .  控制层

    1.     @RequestMapping("/test/ResponseBody/json")
    2.     @ResponseBody
    3.     public User testResponseBodyJson(){
    4.         User user = new User(1001, "admin1", "123456", 20, "男");
    5.         return user;
    6.     }

    3 .测试

     

    map-->json对象

    1 .控制层

    1.     @RequestMapping("/test/ResponseBody/json")
    2.     @ResponseBody
    3.         public Map testResponseBodyJson(){
    4.         User user1 = new User(1001, "admin1", "123456", 20, "男");
    5.         User user2 = new User(1002, "admin2", "123456", 20, "男");
    6.         User user3 = new User(1003, "admin3", "123456", 20, "男");
    7.         Map map = new HashMap<>();
    8.         map.put("1001", user1);
    9.         map.put("1002", user2);
    10.         map.put("1003", user3);
    11.         return map;
    12.     }

    2. 测试

    list-->json数组

    1 .控制层

    1.     @RequestMapping("/test/ResponseBody/json")
    2.     @ResponseBody
    3.     public List testResponseBodyJson(){
    4.         User user1 = new User(1001, "admin1", "123456", 20, "男");
    5.         User user2 = new User(1002, "admin2", "123456", 20, "男");
    6.         User user3 = new User(1003, "admin3", "123456", 20, "男");
    7.         List list = Arrays.asList(user1, user2, user3);
    8.         return list;
    9.     }

    2. 测试

    七   @RestController注解

    @RestController 注解是 springMVC 提供的一个复合注解，标识在控制器的类上，就相当于为类添加了@Controller 注解，并且为其中的每个方法添加了 @ResponseBody注解  
    @RestController =@Controller+@ResponseBody

    总结

    /**
 * 1、@RequestBody：将请求体中的内容和控制器方法的形参进行绑定
 * 2、使用@RequestBody注解将json格式的请求参数转换为java对象
 * a>导入jackson的依赖
 * b>在SpringMVC的配置文件中设置
 * c>在处理请求的控制器方法的形参位置，直接设置json格式的请求参数要转换的java类型的形参，使用@RequestBody注解标识即可
 * 3、@ResponseBody：将所标识的控制器方法的返回值作为响应报文的响应体响应到浏览器
 * 4、使用@ResponseBody注解响应浏览器json格式的数据
 * a>导入jackson的依赖
 * b>在SpringMVC的配置文件中设置
 * c>将需要转换为json字符串的java对象直接作为控制器方法的返回值，使用@ResponseBody注解标识控制器方法
 * 就可以将java对象直接转换为json字符串，并响应到浏览器

 * 常用的Java对象转换为json的结果：
 * 实体类-->json对象
 * map-->json对象
 * list-->json数组
 */
     

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
协变（Covariance）、逆变（Contravariance）与不变（Invariance）in Scala                            
    
OpenAI新模型发布，免费开放GPT-4o！但只开放一点点...                            
    
Spring Cloud 学习笔记（1 / 3）                            
    
GL Studio 5 安装与体验                            
    
部分移动卡 无人接听时呼叫转移失败 问题分析                            
    
TP4057替代DP4057 500mA线性锂离子电池充电器芯片                            
    
司机调度问题                            
    
vue3组件之间通讯                            
    
C++拷贝、赋值、移动、析构、默认构造 什么时候会被默认生成delete                            
    
Python colorama 设置控制台、命令行输出彩色文字                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/m0_59281987/article/details/127956669
                
    •