React基于fetch的表单提交

最新推荐文章于 2024-06-26 09:37:43 发布
最新推荐文章于 2024-06-26 09:37:43 发布
阅读量1.6w 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/echo_oy/article/details/59108735
版权
本文探讨了在React应用中使用fetch进行表单提交时遇到的问题，特别是当后端SpringMvc无法正确获取Key值的情况。尽管设置了Content-Type为application/x-www-form-urlencoded，并期望数据以URL编码方式提交，但实际请求仍以multipart/form-data方式发送。只有调整格式才能使后端正确接收数据。
摘要由CSDN通过智能技术生成

在用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-f

最低0.47元/天 解锁文章
echo_oy
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
react fetch提交formdata格式数据
Cynthia_Wiki的博客
07-31 1675
1.第一种方式，设置请求头，处理请求参数 export function formDataFetch(url, params) { let arr = Object.values(params) let data = ''; Object.keys(params).forEach((key, index) => { let d = '' index !== Number(arr.length - 1)?d = key + '=' + params[key]+ '&':
React form表单fetch提交数据
周家大小姐
03-25 4634
import React, { Component } from 'react' class PostFrom extends Component { constructor(props) { super(props) this.state = { title: '', body: '' }...
探秘现代电商：Laravel + React-Redux 的强大组合
最新发布
gitblog_00094的博客
06-26 285
探秘现代电商：Laravel + React-Redux 的强大组合 项目地址:https://gitcode.com/mithunjmistry/ecommerce-React-Redux-Laravel 1、项目介绍 这个开源项目是一套完整的电商解决方案，由PHP的Laravel框架提供后台支持，前端则采用React-Redux技术栈构建。通过集成先进的技术和优雅的设计，该项目为开发者提供了创...
react 之 fetch 登录请求formData提交参数
hahahhahahahha123456的博客
08-23 8247
1、 react 表单 按照以往 js 获取表单数据的方法，当然是获取到该 input 的 ID，然后根据 id 定位后获取到其 value 值，但是很可惜，react 不能这样做。 react 对表单元素做了优化处理，对其进行抽象处理，使其使用方式更统一和规范。 约束性组件和非约束性组件 约束性组件，简单来说就是React管理了它的value，而非约束性组件的value则是由原生的DOM...
JavaScript fetch 方式提交表单请求
永远相信美好的事情即将发生
12-30 6694
最近在研究如何使用 fetch 方法发送表单请求，因为我们一般使用的时候fetch一般会将发送的数据处理成 JSON 字符串的格式进行发送，但是如果提交表单的话由于表单格式需要特殊处理，因为无法直接使用 fetch 进行发送，这里介绍一下如何处理可以使用 fetch 发送表单数据。 以一个表单作为示例，下图的HTTP请求将向本地发送一个表单提交的请求，请求表单内容包含 name : 张三 age : 23 sex : man file : 简历.pdf 上图就是我们使用表单提交请求时，浏览器将我们的表单
react项目请求数据的fetch的使用
aoxiaochun1220的博客
11-01 451
准备三个文件(封装请求函数),然后测试一下，能不能调用数据 第一个文件 request.js import 'whatwg-fetch'; /** * Parses the JSON returned by a network request * * @param {object} response A response from a net...
React通过fetch实现post上传json和formData
qq_44997147的博客
04-17 4532
在react中利用fetch进行CORS跨域需要注意的点 当我们直接在fetch的url中输入完整的http时，就算加了"Access-Control-Allow-Origin": "*"也会报下面的错误： Access to fetch at ‘http://xxx.xx.xxx.xx:8080/admin/onLogin’ from origin ‘http://localhost:3000...
React Native 使用Fetch发送网络请求的示例代码
01-19
在项目中我们常用到的一般为GET和POST两种请求方式，针对带参数的表单提交这类的请求，我们通常会使用POST的请求方式。 为了发出HTTP请求，我们需要使用到 React Native 提供的 Fetch API 来进行实现。要从任意地址...
详解React Native网络请求fetch简单封装
08-29
React Native 网络请求 fetch 简单封装 本篇文章主要介绍了 React Native 网络请求 fetch 的简单封装，旨在提高开发效率和代码质量。在原生应用开发中，为了方便业务开发人员使用，我们一般会对网络库进行一些上传...
基于React框架 仿钉钉审批流、工作流源代码
08-16
React应用中常使用fetch或axios等库进行Ajax请求，实现前后端数据的同步。 9. **表单处理**：在审批流程中，表单填写是重要环节。React可以配合Formik、Yup等库来简化表单的验证和处理，提供更好的用户体验。 10. ...
react-基于Reactantd实现后台模板
08-15
在本文中，我们将深入探讨如何基于React和Ant Design框架实现一个强大的后台管理模板。React是Facebook推出的开源JavaScript库，用于构建用户界面，尤其是单页应用（SPA）。而Ant Design则是一个高质量、企业级的...
React Native使用fetch实现图片上传的示例代码
08-27
总之，React Native中使用fetch进行图片上传涉及到的关键点包括创建`FormData`对象、将图片数据添加到其中、设置正确的请求头和处理响应。理解这些步骤能帮助你更好地实现在React Native应用中的图片上传功能。
react使用fetch向后端传值
erose的博客
05-13 1402
前端 function deleteTool () { var url = 'http://localhost:8080/admin/deleteTool';//传值的地址 var data = { toolnum: '0' };//传值的内容，键:值格式 fetch(url, { method: 'post',//post方法 headers: { "Content-Type": "application/json;charset=utf-8", 'To
react前端提交表单数据至后端
weixin_51277037的博客
02-17 2701
<form method='post'> <p>id</p> <input type="name" name="name" onChange={this.handleChange}/> <p>password</p> <input type="password" name="password" onChange={this.handleChange}/> <br />
fetch的基本使用
weixin_30699465的博客
12-18 453
一、fetch 　　fetch是一种XMLHttpRequest的一种替代方案，在工作当中除了用ajax获取后台数据外我们还可以使用fetch、axios来替代ajax 二、fetch的基本使用 　　1、npm install whatwg-fetch --save 　　2、import 'whatwg-fetch' 　　fetch(url,options).th...
react提交用户信息给服务器,react 之 fetch 登录请求formData提交参数
weixin_35171513的博客
08-09 492
买了一包大鸡排也没心思吃，解决完这个问题后，狠狠地咬了一口大鸡排！之前每次用 fetch 都是获取数据，没有提交过参数，但是现在做的登录功能，是要将表单中输入的用户名和密码拿到后提交给后台服务器端，并得到返回数据来判断用户名和密码是否正确。1、 react 表单按照以往 js 获取表单数据的方法，当然是获取到该 input 的 ID，然后根据 id 定位后获取到其 value 值，但是很可惜，re...
React 之使用 fetch
weixin_30596165的博客
09-22 156
一.安装。 1.根据文档提示，用 npm 安装的话，执行npm install whatwg-fetch --save即可安装。2.为了兼容老版本浏览器，还需要安装npm install es6-promise --save。安装完成之后，注意看一下package.json中的变化。 二.基本使用. 1.get 的基本使用 import 'whatwg-fetch' ...
在react中使用fetch
热门推荐
qq_36529459的博客
05-19 1万+
fetch是一个和axios一样的一个基于promise封装的一个http库。但是他与axios不同，从我个人角度理解，他比axios封装的更为严谨。在刚使用fetch去请求数据的时候：fetch('url').then(res=&gt;{ console.log(res); })输出的并不是我们请求的数据，而是：但是，从status来看，我们的确从服务端请求到了数据。这就是他与其他ht...
使用fetch发送post请求
weixin_46266464的博客
02-29 4076
在这个例子中，我们定义了一个异步函数sendFormData，它接受一个数据对象作为参数。然后创建一个包含请求方法、头部信息以及请求体的选项对象。根据API的需求，你可以选择不同的’Content-Type’头来匹配发送的数据类型（JSON或URL编码的表单数据）。最后，通过调用fetch函数发起POST请求，并处理响应结果。在使用fetch API进行HTTP POST请求时，需要将请求方法设置为POST，并且通常会携带请求体（包含要发送的数据）。下面对请求方法进行简单封装，以下为封账代码。
React fetch基本使用及二次封装
lqiqil的博客
03-23 1183
。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值