Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported]

最新推荐文章于 2024-05-29 11:00:10 发布

千里草竹

最新推荐文章于 2024-05-29 11:00:10 发布

阅读量355

点赞数

分类专栏： spring

本文链接：https://blog.csdn.net/u012848709/article/details/107951514

版权

spring 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

楔子

springboot RequestBody接受前台提交数据，提示错误Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

前台ajax

<!DOCTYPE html>
<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

<!DOCTYPE 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;
}

千里草竹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> &lt
复制链接

扫一扫