ajax post請求報錯415或400解決方案
jsp頁面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-2.1.0.js"></script>
</head>
<body>
<button id="btn">發送ajax請求</button>
<script>
//頁面加載事件
$(function () {
$("#btn").click(function () {
//發送ajax請求
var url = "user/testAjax";
var params = {"username":"liangge", "password":"123", "age":18};
$.ajax({
url:url,
data:params,
type:"post",
success:function (resultData) {
//成功后的回調函數
console.log(resultData);
console.log(resultData.username);
console.log(resultData.password);
console.log(resultData.age);
},
dataType:"json"
});
});
});
</script>
</body>
</html>
java代碼
@Controller
@RequestMapping(path = "/user")
public class UserController {
/**
* 模擬異步請求和響應
*/
@RequestMapping(path = "/testAjax",method = RequestMethod.POST)
public @ResponseBody User testAjax(@RequestBody User user){
System.out.println("testAjax方法執行了...");
//瀏覽器發送ajax請求，傳的是json字符串，后端把json字符串封裝到user對象中
System.out.println(user);
//模擬從數據庫中查數據
user.setUsername("張三");
user.setPassword("456");
user.setAge(30);
return user;
}
}
只要點擊 發送ajax 按鈕，就報了如下錯誤：
HTTP的狀態碼415為
415 Unsupported Media Type 服務器無法處理請求附帶的媒體格式 (不支持的媒體類型)
基本上就是跟 content-type 有關 (content-type：設置發送給服務器數據的格式)
查看一下請求頭信息
tips:
post提交數據四種常見的content-type取值：
1.application/x-www-form-urlencoded ：
最常見的 POST 提交數據的方式
2.multipart/form-data ：
使用表單上傳文件時，傳遞這個值
3.application/json ：
用來告訴服務端發送的數據是序列化后的 JSON 字符串
4.text/xml ：
使用 HTTP 作為傳輸協議，XML 作為編碼方式的遠程調用規范
所以不難發現為什么默認的是 application/x-www-form-urlencoded
也知道我們該用哪一個值了
初次修改：
<script>
//頁面加載事件
$(function () {
$("#btn").click(function () {
//發送ajax請求
var url = "user/testAjax";
var params = {"username":"liangge", "password":"123", "age":18};
$.ajax({
url:url,
data:params,
type:"post",
success:function (resultData) {
//成功后的回調函數
console.log(resultData);
console.log(resultData.username);
console.log(resultData.password);
console.log(resultData.age);
},
dataType:"json",
contentType: 'application/json;charset=UTF-8'
});
});
});
</script>
但還是報錯了，報400
看下請求頭中的contentType
contentType已經修改過，為什么報400呢？
因為前后台傳入的數據不匹配，后台無法解析數據，告訴服務端數據是序列化后的 JSON 字符串，
但是JSON數據確沒有序列化或是沒有滿足JSON的格式。
所以需要對json進行序列化 ==>JSON.stringify( )
JSON.stringify( ) 后面會做簡單說明
<script>
//頁面加載事件
$(function () {
$("#btn").click(function () {
//發送ajax請求
var url = "user/testAjax";
var params = {"username":"liangge", "password":"123", "age":18};
$.ajax({
url:url,
data:JSON.stringify(params),
//data:'{"username":"liangge", "password":"123", "age":18}',或者這樣寫也可以，不用序列化，直接寫的規范一點
type:"post",
success:function (resultData) {
//成功后的回調函數
console.log(resultData);
console.log(resultData.username);
console.log(resultData.password);
console.log(resultData.age);
},
dataType:"json",
contentType: 'application/json;charset=UTF-8'
});
});
});
</script>
再試一次，控制台打印了：
testAjax方法執行了...
User{username='liangge', password='123', age=18}
控制台也輸出了數據：
OK 成功！！！
JSON.stringify() 把 JavaScript 對象轉換為字符串，對 JavaScript 對象進行字符串化
也可以用作來對json數據進行序列化
示例：
<script type="text/javascript">
var obj = { name:"亮哥", age:18, city:"上海"};
var myJSON = JSON.stringify(obj);
console.log(myJSON); // {"name":"亮哥","age":18,"city":"上海"}
var arr = [ "小李", "小劉", "小王" ];
var myJSON02 = JSON.stringify(arr);
console.log(myJSON02); // ["小李","小劉","小王"]
</script>