Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported]
楔子
springboot RequestBody接受前台提交数据 ，提示错误
Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]
前台ajax
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<form id="formN" action="http://localhost:9590/test/ajax" method="get">
<input type="text" name="study">
<input type="text" name="age" id="" value="" /><label for="">label>
<input type="submit" value="提交" />
form>
<button id="btn">转换button>
body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>
<script>
//表单数据转成json格式
function formToJson(formObj) {
var o = {};
var a = formObj.serializeArray();
$.each(a, function() {
if (this.value) {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || null);
} else {
if ($("[name='" + this.name + "']:checkbox", formObj).length) {
o[this.name] = [this.value];
} else {
o[this.name] = this.value || null;
}
}
}
});
return JSON.stringify(o);
}
$("#btn").click(function() {
console.log(formToJson($("#formN")))
$.ajax({
url: $("#formN").attr("action"),
type: "post",
data: formToJson($("#formN")),
dataType: "json",
contentType: "application/json",/* 注意这个位置，否则后台接受报错 */
success: function(data) {
console.log("over..", data);
},
error: function(e) {
alert("错误！！", e);
}
});
})
script>
html>
后台
//RequestBody接受前台的 json
@PostMapping("ajax")
public Long ajax(@RequestBody Ajax ajax) {
System.out.println(ajax);
return 1L;
}
@Data
class Ajax {
private String study;
private String age;
}
jquery ajax提交表单(包括文件)
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="formN" action="http://localhost:9590/test/ajaxfile" enctype="multipart/form-data" method="post">
<input type="text" name="study">
<input type="text" name="age" id="" value="" />
<input type="file" name="fils" />
<input type="submit" value="提交" />
</form>
<button id="btn">转换</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$("#btn").click(function() {
$.ajax({
url: $("#formN").attr("action"),
type: "post",
cache: false, //上传文件不需缓存
processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
data: new FormData($("#formN")[0]),
dataType: "json",
success: function(data) {
console.log("over..", data);
},
error: function(e) {
alert("错误！！", e);
}
});
})
</script>
</html>
spring mvc 接受
@PostMapping("ajaxfile")
public Long ajaxFile(Ajax ajax,
@RequestParam(value = "fils", required = false) MultipartFile fils) {
System.out.println(ajax);
System.out.println(fils == null);
try {
fils.transferTo(new File("d:/", SysUtils.getDate4() + ".jpg"));
} catch (IOException e) {
e.printStackTrace();
}
return 1L;
}
@Data
class Ajax {
private String study;
private String age;
}
使用 jquery.form提交表单(包括文件)
html
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<form id="formN" action="http://localhost:9590/test/ajaxform" enctype="multipart/form-data" method="post">
<input type="text" name="study">
<input type="text" name="age" id="" value="" />
<input type="file" name="fils" />
<input type="submit" value="提交" />
form>
<button id="btn">转换button>
body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.2.2/jquery.form.js">script>
<script>
$('#btn').click(function() {
$('#formN').ajaxSubmit({
success: function(da) {
console.log(da)
alert(da.msg)
$('#formN')[0].reset();
}
});
});
script>
html>
java
@PostMapping("ajaxform")
public JSONObject ajaxFrom(@RequestParam(value = "fils", required = false) MultipartFile fils
, Ajax ajax) {
System.out.println(ajax);
if (fils != null) {
System.out.println(fils.getSize());
try {
fils.transferTo(new File("d:/", SysUtils.getDate4() + ".jpg"));
} catch (IOException e) {
e.printStackTrace();
}
}
JSONObject jsonObject = new JSONObject();
jsonObject.put("msg", "成功");
return jsonObject;
}