Spring MVC 處理Ajax請求的方式詳解

更新時間：2024年09月29日 11:35:48 作者：Miaow.Y.Hu

本文介紹了在SpringMVC中處理Ajax請求的方法,主要依賴于Controller和返回類型的配置,使用@RequestMapping注解處理Ajax的控制器方法,本文給大家介紹Spring MVC 處理Ajax請求的方式,感興趣的朋友跟隨小編一起看看吧

使用@RequestMapping注解

在Spring MVC中，可以使用@RequestMapping中注解處理Ajax中的控制器方法。通常，Ajax 請求會使用 GET 或 POST 方法。

import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/api")
public class MyController {
    @GetMapping("/data")
    public ResponseEntity<MyData> getData() {
        MyData data = new MyData(); // 創(chuàng)建數(shù)據(jù)對象
        return ResponseEntity.ok(data); // 返回數(shù)據(jù)
    }
    @PostMapping("/data")
    public ResponseEntity<String> postData(@RequestBody MyData data) {
        // 處理接收到的數(shù)據(jù)
        return ResponseEntity.ok("Data received successfully");
    }
}

@RequestBody

@RequestBody可以獲取請求體信息，使用@RequestBody注解標(biāo)識控制器方法的形參，當(dāng)前請求的請求體就會為當(dāng)前注解所標(biāo)識的形參賦值

<!--此時必須使用post請求方式，因為get請求沒有請求體-->
<form th:action="@{/test/RequestBody}" method="post">
    用戶名：<input type="text" name="username"><br>
    密碼：<input type="password" name="password"><br>
    <input type="submit">
</form>

@RequestMapping("/test/RequestBody")
public String testRequestBody(@RequestBody String requestBody){
    System.out.println("requestBody:"+requestBody);
    return "success";
}

前端發(fā)送請求：

/* 方式一
axios({
    method: 'get',  // 請求方式，以name = value & name = value的形式傳遞參數(shù)不管傳遞的方式是get還是post，請求參數(shù)都會被拼接到請求地址后。
          此種方式的請求參數(shù)可以通過request.getParameter()獲取
    url: ‘', //請求路徑，
    params: {
       username: 'admin',  //以這種json方式發(fā)送的請求參數(shù)，請求參數(shù)被放在請求體中，并傳輸?shù)椒?wù)器，這種方式傳值，是沒法被request.getParameter()獲取的
       password: '123456'
       }
}).then(function (response) {
      console.log(response);
      vm.msg = response.data;
    }
*/
/* axios的請求格式
 * 請求方式：
* 1. axios.get()
* 2. axios.post()
* 3. axios.put()
* 4. axios.delete()
* 5. axios.head()
* 6. axios.options()
* 7. axios.patch()
* 8. axios.request()
//方式二
  axios.get("/test/RequestBody").then(function (response) {
      console.log(response);
      vm.msg = response.data;
      });
     },
*/
      /*
      * 請求體的格式
      * 1. 使用url傳遞參數(shù)
      * 2. 使用json傳遞參數(shù)
      */

RequestBody獲取json格式的請求參數(shù)

在使用了axios發(fā)送ajax請求之后，瀏覽器發(fā)送到服務(wù)器的請求參數(shù)有兩種格式：

1、name=value&name=value...，此時的請求參數(shù)可以通過request.getParameter()獲取，對應(yīng)SpringMVC中，可以直接通過控制器方法的形參獲取此類請求參數(shù)

2、{key:value,key:value,...}，此時無法通過request.getParameter()獲取，之前我們使用操作json的相關(guān)jar包gson或jackson處理此類請求參數(shù)，可以將其轉(zhuǎn)換為指定的實體類對象或map集合。在SpringMVC中，直接使用@RequestBody注解標(biāo)識控制器方法的形參即可將此類請求參數(shù)轉(zhuǎn)換為java對象

使用@RequestBody獲取json格式的請求參數(shù)的條件：
導(dǎo)入jackson的依賴

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.12.1</version>
</dependency>

Spring MVC的配置文件中設(shè)置開啟MVC注解驅(qū)動

<!--開啟mvc的注解驅(qū)動-->
<mvc:annotation-driven />

在控制器方法的形參位置，設(shè)置json格式的請求參數(shù)要轉(zhuǎn)換成的java類型（實體類或map）的參數(shù)，并使用@RequestBody注解標(biāo)識

<input type="button" value="測試@RequestBody獲取json格式的請求參數(shù)"@click="testRequestBody()">
<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        methods:{
            testRequestBody(){
                axios.post(
                    "/SpringMVC/test/RequestBody/json",
                    {username:"admin",password:"123456"}
                ).then(response=>{
                    console.log(response.data);
                });
            }
        }
    });
</script>

//將json格式的數(shù)據(jù)轉(zhuǎn)換為map集合
@RequestMapping("/test/RequestBody/json")
public void testRequestBody(@RequestBody Map<String, Object> map,HttpServletResponse response) throws IOException {
    System.out.println(map);
    //{username=admin, password=123456}
    response.getWriter().print("hello,axios");
}
//將json格式的數(shù)據(jù)轉(zhuǎn)換為實體類對象
@RequestMapping("/test/RequestBody/json")
public void testRequestBody(@RequestBody User user, HttpServletResponseresponse) throws IOException {
    System.out.println(user);
    //User{id=null, username='admin', password='123456', age=null,gender='null'}
	response.getWriter().print("hello,axios");
}

@RequestBody

@ResponseBody用于標(biāo)識一個控制器方法，可以將該方法的返回值直接作為響應(yīng)報文的響應(yīng)體響應(yīng)到瀏覽器

@RequestMapping("/testResponseBody")
public String testResponseBody(){
    //此時會跳轉(zhuǎn)到邏輯視圖success所對應(yīng)的頁面
    return "success";
}
@RequestMapping("/testResponseBody")
@ResponseBody
public String testResponseBody(){
    //此時響應(yīng)瀏覽器數(shù)據(jù)success
    return "success";
}

RequestBody響應(yīng)瀏覽器json數(shù)據(jù)

服務(wù)器處理ajax請求之后，大多數(shù)情況都需要向瀏覽器響應(yīng)一個java對象，此時必須將java對象轉(zhuǎn)換為json字符串才可以響應(yīng)到瀏覽器，之前我們使用操作json數(shù)據(jù)的jar包gson或jackson將java對象轉(zhuǎn)換為json字符串。在SpringMVC中，我們可以直接使用@ResponseBody注解實現(xiàn)此功能。

@ResponseBody響應(yīng)瀏覽器json數(shù)據(jù)的條件：
1、導(dǎo)入jackson的依賴

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.12.1</version>
</dependency>

2、SpringMVC的配置文件中設(shè)置開啟mvc的注解驅(qū)動

<!--開啟mvc的注解驅(qū)動-->
<mvc:annotation-driven />

3、使用@ResponseBody注解標(biāo)識控制器方法，在方法中，將需要轉(zhuǎn)換為json字符串并響應(yīng)到瀏覽器的java對象作為控制器方法的返回值，此時SpringMVC就可以將此對象直接轉(zhuǎn)換為json字符串并響應(yīng)到瀏覽器。

<input type="button" value="測試@ResponseBody響應(yīng)瀏覽器json格式的數(shù)據(jù)"@click="testResponseBody()"><br>
<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        methods:{
            testResponseBody(){
                axios.post("/SpringMVC/test/ResponseBody/json").then(response=>{
                    console.log(response.data);
                });
            }
        }
    });
</script>

//響應(yīng)瀏覽器list集合
@RequestMapping("/test/ResponseBody/json")
@ResponseBody
public List<User> testResponseBody(){
    User user1 = new User(1001,"admin1","123456",23,"男");
    User user2 = new User(1002,"admin2","123456",23,"男");
    User user3 = new User(1003,"admin3","123456",23,"男");
    List<User> list = Arrays.asList(user1, user2, user3);
    return list;
}
//響應(yīng)瀏覽器map集合
@RequestMapping("/test/ResponseBody/json")
@ResponseBody
public Map<String, Object> testResponseBody(){
    User user1 = new User(1001,"admin1","123456",23,"男");
    User user2 = new User(1002,"admin2","123456",23,"男");
    User user3 = new User(1003,"admin3","123456",23,"男");
    Map<String, Object> map = new HashMap<>();
    map.put("1001", user1);
    map.put("1002", user2);
    map.put("1003", user3);
    return map;
}
//響應(yīng)瀏覽器實體類對象
@RequestMapping("/test/ResponseBody/json")
@ResponseBody
public User testResponseBody(){
    return user;
}