前端攜帶List參數向後端發送請求很困難？NO

前端請求如何向後端傳遞List類型的數據

問題描述

在最近的項目開發中，遇到了一個前端向後端發送List類型數據的請求，各種嘗試結果總是失敗，特此總結下來。

後端接口

根據博客類型id集合刪除博客集合

    @DeleteMapping("/ids")
    public ResponseEntity<Void> deleteBlogTypes (@RequestBody List<Long> blogTypeIds ){
        blogTypeService.deleteBlogTypes(blogTypeIds);
        return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
    }

因爲js並沒有List數據類型，所以怎樣發送請求是一個很頭疼的問題

解法1

1. 思路一當然是採用json將參數序列化，然後進行攜帶請求參數，一位get請求和delete請求的參數信息並不是放在請求體中，而是放在地址欄中拼接參數，所以這裏採用post的請求比較好（地址欄的url有限制，不可過長，批量刪除所需要拼接的id集合可能很多）

	//聲明空的數組
	let blogTypeIds = [];
	//在數組添加數據，省略......
	//發送post請求
	$.ajax({
	     method:"post",
	     url:"/blog-type/ids",
	     dataType: "json",
	     data: JSON.stringify(blogTypeIds),  //這裏需要將參數，序列化成爲json數據
	     headers:{
	          'Content-Type':'application/json;charset=UTF-8',
	     },
	     success: function (data, status, xhr) {
	          //請求成功執行操作                      
	     },
	     error: function (error) {   
	     	  //請求失敗後的回調方法
	          console.log(error)              
	     }
	});
                           

ps：data中的數據，必須使用data: JSON.stringify(blogTypeIds);如果使用
data: { blogTypeIds : JSON.stringify(blogTypeIds) }這樣的格式則不能成功。

2. 修改後臺接口爲post請求

    @PostMapping("/ids")
    public ResponseEntity<Void> deleteBlogTypes (@RequestBody List<Long> blogTypeIds ){
        blogTypeService.deleteBlogTypes(blogTypeIds);
        return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
    }

感覺delete請求也是可以實現的，只是還沒有找到好的方法，之後遇到，在進行更新。

注意事項

1. 首先ajax要爲post請求（post和delete請求的向後臺傳參方式不同）
2. 參數只能是json,並且形式只能是data:JSON.stringify(list)，而不能是data: { list: JSON.stringify(list) }。
3. 需要設置contentType : 'application/json',不然會報錯Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported],因爲默認這種類型不能被解析
4. 數組要使用JSON.stringify(list)，解析成爲一個合法的json字符串（可以在請求外解析，也可以在請求內的data中直接解析）
5. controller 加上@RequestBody。

解法2

在網上還找到了很多別的解決方式，但是很可惜我好像並沒有成功，但可能也可以成功。之後有機會再進行測試

1.前臺傳遞數組類型的參數，不需要直接解析成json字符串

	let data=[];
	//在數組添加數據，省略......
	$.ajax({
		method:"post",
        url:"/blog-type/ids",
        data: {
            blogTypeIds:data
        },
        dataType: "json",
        success: function (data) {
        }
    });

2.後臺使用@RequestParam(required = false, value = “list[]”)

    @PostMapping("/ids")
    public ResponseEntity<Void> deleteBlogTypes (@RequestParam(value = "blogTypeIds[]") List<Long> blogTypeIds ){
        blogTypeService.deleteBlogTypes(blogTypeIds);
        return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
    }

注意事項

1. value = "blogTypeIds[]，這個不能省，否則不能成功。
2. @RequestParam(value = "blogTypeIds[]") List<Long> blogTypeIds換成@RequestParam(value = "blogTypeIds[]") Long[] blogTypeIds也是可以成功的。說明後臺的List數據和數組數據都可以使用這樣的方式來來實現

ps：解法二有待考證(我並沒有成功)，參考博客：https://blog.csdn.net/qq_27093465/article/details/52094112
解法1經過測試已經成功。