React基于fetch的表单提交

关注

原创最新推荐文章于 2026-09-10 17:27:20 发布 1.6w 阅读 AI 写同款· GEO 优化 ›

React表单提交与数据获取的实战教学本文通过React构建巫师表单的实例，详细介绍了如何处理表单输入、数据提交以及表单重置。此外，还展示了如何在React应用中使用Fetch API和useEffect钩子从远程端点获取数据。阅读详情

在用fetch进行表单提交时，参照https://github.com/github/fetch的用法

let data = new FormData(document.getElementById('login-form'))
        	fetch('../membership/authenticate', {method: "POST",
        		headers:{
        			'Content-Type': 'application/x-www-form-urlencoded'
        		},
        		body: data}).then(function(response) {
        		
        	},function(error){
        		
        	})

格式被转为了WebKitFormBoundary模式:

此时我后端springMvc是取不到Key值。

明明已经设置了ContentType为application/x-www-form-urlencoded，设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。

却还是按照multipart/form-data提交，

如果按照如下格式则能够正常取得到值：

let data = 'username=' + values.username + '&password=' + values.password;
        	fetch('../membership/authenticate', {method: "POST",
        		headers:{
        			'Content-Type': 'application/x-www-form-urlencoded'
        		},
        		body: data}).then(function(response) {
        		
        	},function(error){
        		
        	})