今天在開發一個前端頁面時遇到一個問題,前端通過ajax請求后臺接口時,需要將數據以json的形式傳給后臺,但發現無論如何設置enctype,后臺都無法接收到正確的參數值,經過調試排查后,發現原來是enctype設置為json時無效。
// 代碼示例 $.ajax({ type: 'POST', url: '/api/user/info', data: JSON.stringify({'name': 'Tom', 'age': 18}), contentType: 'application/json;charset=utf-8', //enctype: 'application/json', // 無效 dataType: 'json', success: function(data) { console.log(data); } });
通過以上代碼可以看出,前端發送請求時使用了application/json類型的content-type,同時設置 enctype 為application/json,但是后臺仍然無法接收到正確的參數值。
因為enctype是用來設置表單提交時的編碼方式,具體的解釋可以看這里(MDN Web Docs),而ajax發送請求時,并不需要使用enctype來設置編碼方式,因為這個值是針對表單提交而言的,只有當表單提交時,瀏覽器才會根據這個值來編碼參數。
正確的方式應該是使用contentType來設置ajax請求發送的數據類型及編碼方式,這個值會告訴瀏覽器如何將數據編碼后發送給服務器,服務端也可以根據這個值對請求的數據進行解碼,contentType的值只需要設置為application/json;charset=utf-8即可,不需要再使用enctype來設置編碼方式。
// 修改后的代碼示例 $.ajax({ type: 'POST', url: '/api/user/info', data: JSON.stringify({'name': 'Tom', 'age': 18}), contentType: 'application/json;charset=utf-8', dataType: 'json', success: function(data) { console.log(data); } });
經過以上修改后,后臺就能正確的接收到數據了。
上一篇emqx數據json
下一篇c 傳遞json參數