fetch 使用 form data 方式提交

最新推荐文章于 2025-03-01 13:45:00 发布

ISaiSai

最新推荐文章于 2025-03-01 13:45:00 发布

阅读量1w

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/ISaiSai/article/details/78125850

版权

react 专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何使用JavaScript的fetch API发送POST请求，并设置了正确的Content-Type为application/x-www-form-urlencoded。文章详细解释了如何将对象转换成URL编码字符串并作为请求体发送。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import queryString from 'query-string';

fetch 参数如下,
1.需要设置content-type application/x-www-form-urlencoded
2.body 进行param 转化为a=1&b=2 的形式
则提交到服务端的内容与post内容相同

  headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            }, 
            method: "POST",
            body: queryString.stringify(data)

参考文档https://stackoverflow.com/questions/29775797/fetch-post-json-data

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ISaiSai

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React form表单fetch提交数据

周家大小姐

03-25

4724

import React, { Component } from 'react' class PostFrom extends Component { constructor(props) { super(props) this.state = { title: '', body: '' }...

传递参数格式为form-data与json的区别，以及ajax、axios、fetch请求的方式

最新发布

m0_72030584的博客

03-01

722

【代码】JavaScript 中 `fetch` API 不同请求体格式。

Fetch表单提交和跨域请求

百世经纶『一页書』

01-06

922

表单提交和跨域请求1.跨域2.fetch请求 1.跨域全称是"跨域资源共享"（Cross-origin resource sharing）解决跨域基本就是后端添加 Response Header import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.Autowir

fetch 用form Data 格式发送数据（带json格式的参数）

Akukudeteng的博客

10-22

5846

坑： 1.fetch如何使用form Data 格式发送数据？答：使用 var formData = new FormData(); formData.append('developerId', '633');//传参数 2.在控制台发现Content-Type:multipart/form-data ；而且数据没有发送成功，后面也没有boundary的分割？答：不要在头部设置'Content-Type':'multipart/form-data;', hea...

fetch发送Form Data请求并携带cookie

weixin_30918633的博客

11-26

561

今天我们来说说如何fetch发送Form Data请求并携带cookie，直接进入正题好吧，别问我今天为啥不在开始吹两句了，累到一句牛逼不想吹。。。。。。步骤1：　　设置头部，"Content-Type": "application/x-www-form-urlencoded" 步骤2：　　发送请求的时候采用key=val&key1=val1这种形式进行连接步骤三：　...

基于form-data请求格式详解

12-13

本文将深入解析multipart/form-data的工作原理及其在实际应用中的使用。 multipart/form-data是一种HTTP请求格式，主要用于POST请求，特别是当需要在请求中包含文件上传时。这种格式的特色在于它可以携带多个不同...

防止Layui form表单重复提交的实现方法

10-16

在上述函数中，如果需要在禁止表单默认提交行为的同时，与服务器进行数据交互，则可以使用JavaScript的XMLHttpRequest或者现代的Fetch API来异步提交表单数据。使用AJAX提交表单数据的好处是，可以避免页面刷新，...

【fetch】用 Form Data 格式发送数据

qq_45677671的博客

12-05

2388

fetch 把数据发送到 Form Data 里面传给后端

fetch处理form-data请求（本地文件地址）以及普通fetch请求

大青虫的博客

04-10

1540

【代码】fetch处理form-data请求（本地文件地址）

form表单提交、ajax、fetch、formdata，以及跨域

小毛驴的博客

03-12

2579

一.form表单提交 1.1 简单的介绍  <form action="www.baidu.com" method="POST" name="post提交"> <p>name: <input type="text" name="username">&lt...

前端使用fetch、axios提交FormData 后台使用Express fileupload、multer接收数据

博观而约取，厚积而薄发~

12-31

564

Web数据交互方式，提供了对Request和Response（以及其他与网络请求有关的）对象的通用定义，是XMLHttpRequest的一种替代方案，fetch不是ajax的进一步封装，而是原生js。，FormData对象代表了一个表单的键值对集合，它可以包含多个字段，并且可以包含文件数据。FormData通常用于通过AJAX（XMLHttpRequest或Fetch）发送数据，避免页面刷新。

踩坑：fetch上传formData文件。无需额外增加headers、浏览器会自动根据文件加上headers 生成boundary

Xpy 的博客

11-24

3644

一、场景想要实现的效果：获取到图片本地内容后，通过 fetch 来上传 formData 格式数据。二、遇到的问题有问题的请求： function request(params){ const { api, data } = params; const url = window.location.origin + api; return fetch(url,{ method:"POST", headers:{ 'Content-Type': 'multipart/fo

fetch与formdata的故事

图解前端的博客

11-26

6118

前传很久以前有个前端想学习fetch的用法，于是他用php写了一个接受post请求的接口，然后前台写了一个使用fetch请求PHP接口的demo，如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> </head> <body>

使用fetch 进行post请求，传递formdata数据时，不能设置 ‘Content-type‘: ‘multipart/form-data‘,

qq_17335549的博客

10-19

1050

加入你用fetch API，发送文件数据，参数时formdata格式的，那么你就不能再在headers里面设置'Content-type': 'multipart/form-data' 了，否则会报错。因为浏览器会自动识别formdata格式，再手动指定content-type就有问题，不行你试试！

form提交的几种方法

雨中漫步--专栏

10-19

1546

最近研究了下html中，form保单提交的几种方法，现与大家分享一下（注：网上可能已经有好多版本了，这里自己写下来做个总结了，哈！）：方法一：利用form的onsubmit()函数（经常使用） <script type="text/javascript"> function validateForm(){ if(document.reply.title.v...

浏览器自带的fetch函数发送GET POST请求，发送POST form数据

程序员老狼专注开发aigc或客服系统应用

04-20

6596

fetch 是浏览器自带的函数，用于发送网络请求。fetch 方法返回一个 Promise 对象，可以通过链式调用 then 方法处理响应数据，或者通过 catch 方法捕获错误信息。它支持 Promise 和异步/await 两种调用方式。‘ 以下是一个示例代码，展示如何使用 fetch 进行 GET 请求： fetch('https://jsonplaceholder.typicode.c...

使用Javascript/form提交GET/POST数据提交方式

10-16

在JavaScript中，你可以使用`XMLHttpRequest`对象或者现代浏览器提供的`fetch()`函数来通过GET或POST方法提交表单数据。以下是两种常见的方法： 1. **使用XMLHttpRequest (GET)**: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'your-url?param1=value1&param2=value2'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { console.log(xhr.responseText); } }; ``` 在这个例子中，GET请求将包含查询字符串的形式发送。 2. **使用XMLHttpRequest (POST)**: ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', 'your-api-url'); xhr.setRequestHeader('Content-Type', 'application/json'); // 或者 'application/x-www-form-urlencoded' 如果数据是键值对形式 // JSON 数据 var data = { key1: 'value1', key2: 'value2' }; xhr.send(JSON.stringify(data)); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { console.log(xhr.responseText); } }; ``` 对于POST方法，你需要设置正确的Content-Type，并且通常会发送JSON格式的数据，而不是直接在URL中显示。 3. **使用fetch (GET or POST)**: ```javascript fetch('your-url', { method: 'GET', // 或者 'POST', headers: { 'Content-Type': 'application/json' // 或者 'application/x-www-form-urlencoded' }, body: JSON.stringify({ your_data_here }) // 只有在POST时需要 }) .then(response => response.text()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` fetch API的语法更简洁，但是不是所有旧版浏览器都支持。