技術標籤：javaspringmvcjava

axios傳送post請求，springMVC接收不到資料

一、後端無法接收單個數據：

1. 前端axios

updateOrderFlag(id){
  axios.post('/order/updateOrderFlag.do', {
    id: id
  })
}

2. 後端接收

@PostMapping("/updateOrderFlag.do")
public void updateOrderFlag(Long id){
   System.out.println(id);
}

3. 後端輸出結果為null
   但通過前端的測試，前端是可以獲取到updateOrderFlag(id)傳過來的id，可知是axios傳參出錯

二、發生原因

1.我們可以開啟開發者工具，看看axios的請求的請求頭詳情，發現Request-Headers的Content-Type是application/json;charset=UTF-8，即告知瀏覽器我們傳送過去的內容為json格式。
2. 因為接收的資料格式為json，此時我們想到在後端接收資料時加上@RequestBody

@PostMapping("/updateOrderFlag.do")
public void updateOrderFlag(@RequestBody Long id){
   System.out.println(id);
}

此時輸出結果為：{“id”:“xxx”}，無法獲取到其中的資料，此方法不行

1. 通過jquery-API可以看到ajax的請求頭資訊為： “application/x-www-form-urlencoded”，而axios的的格式為json
   
2. 將請求頭的資訊改為 headers:{ ‘Content-Type’:‘application/x-www-form-urlencoded’ }，試驗可知，輸出的結果為null還是不行

test(id){
    axios({
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        },
        method: 'post',
        url: '/order/testupdateOrderFlag.do',
        data: {no:id}
    }).then(function(resp){
        console.log(id)
    });
}
 

三、解決方法一：需要使用qs外掛

1. 安裝qs

npm install qs

2. 頁面引入qs

<script src="//cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>

3. html頁面進行傳參，使用qs.stringify(param))方法
   qs.stringify()將物件序列化成URL的形式，以&進行拼接

methods:{
    deleteOrder(id){
        //建立qs
        var qs = Qs;
        var param={id:id};
        axios.post('/order/deleteOrder.do', qs.stringify(param)).then(function(resp){
            alert("刪除該記錄成功");
        });
    }
}

4. 後臺接收

@PostMapping("deleteOrder.do")
public void deleteOrder(String id){
    System.out.println(id);
}

5. 後臺接收結果
   
6. 使用qs.parse(param)的方法
   qs.parse()將URL(param=“id=012”)解析成物件的形式(id:012)
   後臺接收資料使用@RequestBody ，得到資料{“id”：“012”}

methods: {
    deleteOrder(id){
        //建立qs
        var qs = Qs;
        var param={id:id};
        axios.post('/order/deleteOrder.do', qs.parse(param)).then(function(resp){
            alert("刪除該記錄成功");
        });
    }
}

四、解決方法二：使用URLSearchParams()

1. 前端

updateOrderFlag(id){
	var param = new URLSearchParams();
	param.append("id", id);
	axios.post('/order/updateOrderFlag.do', param)
	.then(function(resp){
		alert("post傳參成功");
	});
}

2. 後端接收：

@PostMapping("/updateOrderFlag.do")
public void updateOrderFlag(Long id){
   System.out.println(id);
}

五、解決方法三：傳物件過去再獲取物件的id

1. 前端

updateOrderFlag(obj){
    var _this=this;
    this.order = obj;
    axios.post('/order/updateOrderFlag.do', this.order).then(function(resp){
        alert("刪除該記錄成功");
    });
}

2. 後端接收

@PostMapping("addDesigner.do")
public void addDesigner(@RequestBody  OrderModel model){
    System.out.println(model.id);
}