前端请求传参格式

一、格式类型

form-data

application/x-www-form-urlencoded

application/json

text/xml

一、form-data

  1. multipart/form-data: 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分,这个一般文件上传时用。

  2. 当method为post时候,浏览器把form数据封装到http body中,然后发送到server。

  3. 如果没有type=file的控件,默认用application/x-www-form-urlencoded。

  4. 如果有type=file,必须用multipart/form-data。浏览器会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息,并加上分割符(boundary)。

    ectype 等于 multipart/form-data。

调用接口的时候参数data等于formData,用console.log打印formdata为空,其实是有数据的

cpp 复制代码
const formData = new FormData();
formData.append('name', '李雷');

// 使用get方法查看数据
formData.get('modelName') // code

二、application/x-www-form-urlencoded

①请求方式为get:

当method为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2...),然后把这个字串append到url后面,用?分割,加载这个新的url,可以传json对象格式

cpp 复制代码
let data={
	name:'李雷',
	age:12
}

②post

为post的情况需要传form-data格式, 窗体数据被编码为名称/值对,这是标准的编码格式


四、Content-Type的使用

客户端发送请求(Request)时的Content-Type设置,特别是使用ajax的时候,如果设置得不准确,很有可能导致请求失败。

  1. 如果是一个restful接口(json格式),一般将Content-Type设置为application/json; charset=UTF-8;
  2. 如果是文件上传,一般Content-Type设置为multipart/form-data
  3. 如果普通表单提交,一般Content-Type设置为application/x-www-form-urlencoded

未完:------------------------

参考:https://blog.csdn.net/qq_45796667/article/details/125239247

相关推荐
老华带你飞10 小时前
电影购票|基于java+ vue电影购票系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
老华带你飞10 小时前
宠物管理|基于java+ vue宠物管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·宠物
释怀不想释怀12 小时前
Ajax,vue生命周期(自动加载页面发出请求)Axios
前端·javascript·ajax
一点晖光12 小时前
ios底部按钮被挡住
前端·ios·微信小程序
Light6019 小时前
CSS逻辑革命:原生if()函数如何重塑我们的样式编写思维
前端·css·响应式设计·组件化开发·css if函数·声明式ui·现代css
蜡笔小嘟19 小时前
宝塔安装dify,更新最新版本--代码版
前端·ai编程·dify
ModyQyW20 小时前
HBuilderX 4.87 无法正常读取 macOS 环境配置的解决方案
前端·uni-app
bitbitDown20 小时前
我的2025年终总结
前端
五颜六色的黑20 小时前
vue3+elementPlus实现循环列表内容超出时展开收起功能
前端·javascript·vue.js
wscats21 小时前
Markdown 编辑器技术调研
前端·人工智能·markdown