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

阳光穿透心脏的1/2处 2022-11-26 11:58 71阅读 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;
    }