記一次vue.js用 http.post 前端傳json到后台用javabean接收的坑

由於最近才接觸vue ,還不是很熟。今天寫代碼的時候，前端請求接口之后一直報  415 Unsupported Media Type，我前端用JSON 提交 ，后台用javaBean 接收，先貼一下代碼

前端的json數據

 //封裝數據
				var spSaTickets={
					ticketno: ‘111’,
					departname:‘科室’,
					promotionid:’214’,
					saleman:‘某某‘,
				};
				var spSaTicketsDtlsdata=[{ticketsgoodsid：‘0342’，orderqty：1}];
				
				
				var spSaTicketAppEntry = {}
				spSaTicketAppEntry = JSON.stringify({
						spSaTickets:spSaTickets,
						spSaTicketsDtls:spSaTicketsDtlsdata,
						delDtlIds:[]
					})

　　post請求

this.$http.post('/.../.../spSaTicketSaveForAPP', 
                    spSaTicketAppEntry,{emulateJSON:true}, {
                    params: {},
                }).then(res => {
                    var jsondata = res.data;
                    if (res.data.returncode == 1) {
                        uni.showToast({
                            icon: 'success',
                            title: '添加成功！'
                        });
                        setTimeout(function() {
                            uni.navigateBack({
                                delta: 1
                            })
                        }, 1000)
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: '提交失敗！'
                        });
                    }
                }).catch(err => {
                    console.log(err);
                })

后台代碼

 

 

 

 這樣提交一直報415錯誤

后來發現是HTTP請求格式不對，Content-Type默認的是格式 application/x-www-form-urlencoded 需要改成application/json

把請求改成了

http.post(this.$serverUrl + '/../../spSaTicketSaveForAPP', 
                    spSaTicketAppEntry
                , {
                    'header': {
                        'Content-Type': 'application/json;charset=UTF-8'
                    },
                }).then(res => {
                    var jsondata = res.data;
                    if (res.data.returncode == 1) {
                        uni.showToast({
                            icon: 'success',
                            title: '添加成功！'
                        });
                        setTimeout(function() {
                            uni.navigateBack({
                                delta: 1
                            })
                        }, 1000)
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: '提交失敗！'
                        });
                    }
                });

比較一下兩種請求提交的數據

 

 

 

 FormData和Payload是瀏覽器傳輸給接口的兩種格式，這兩種方式瀏覽器是通過Content-Type來進行區分的(了解Content-Type)，如果是 application/x-www-form-urlencoded的話，則為formdata方式，如果是application/json或multipart/form-data的話，則為 request payload
的方式。