axios 用formData的方式请求数据

这篇具有很好参考价值的文章主要介绍了axios 用formData的方式请求数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:使用axios库用来做http数据传输。

问题:传递数据的时候不是直接通过json的方式来传输的数据,二是通过formData的方式

解决:

axios 请求头设置,Content-Type

"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"

往后台传递参数的时候用 qs.stringify()处理:

config.data = Qs.stringify(config.data);

 当遇到参数中有 数组对象嵌套时,需要用 JSON.stringify进行包裹:

{
    sbumen:sbumen,
    strjsoninfo:JSON.stringify({ infolist: caiGouNeiRongFormArr }),
}

caiGouNeiRongFormArr 是一个数组对象,类似:

[
{a:1,b:2},
{a:3,b:4}
]

在axios中统一配置:文章来源地址https://www.toymoban.com/news/detail-705391.html

ajax.interceptors.request.use((config) => {
  console.log(config);
  config.data = Qs.stringify(config.data);
  (config.headers = {
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
  }),
  return config;
});

到了这里,关于axios 用formData的方式请求数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端 axios 通过 get 请求发送 json 数据

    先说结论: axios 不能通过 get 请求发送 json 数据 使用 postman 可以做到通过 get 请求发送 json 数据 但是通过 axios 框架就不行, 主要是因为axios是对ajax的一个封装。他本身不支持get请求在body体传参。 原生和jquery的ajax是支持的。建议跟后端沟通,你把json拼在url后面,后端从url的

    2024年02月11日
    浏览(46)
  • 前端vue2中axios封装请求数据,教会你封装教会你请求数据 简单易懂,轻松学会axios封装请求数据 看一眼就会 手把手教会

    2、完成上面的步骤还不够,还需要再创建一个文件夹api,然后在文件夹里面创建自定义的文件名(我创建的是cartApi.js)文件名根据自己的需求命名 下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、get请求以及传参啥的(仅供参考,可以参考下面

    2024年02月03日
    浏览(30)
  • 前端请求数据方法 —— Ajax、Fetch、Axios、Get、Post

    Ajax :( “Asynchronous JavaScript and XML”(异步JavaScript和XML)的缩写)是一组Web开发技术,Ajax不是一种技术,而是一个编程概念。AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。 技术实现 用于演示的HTML(或 XHTML)和

    2024年01月22日
    浏览(44)
  • 数据交互系列:简述vue项目中的两种请求方式(axios和vueResource)

    今天学习了vue的两种发送请求的方式,vueResource和axios,比较了两种方式的使用 VueResource模块发送请求 1. VueResource概述 VueJS的生态圈除了VueRouter之外,还有很多的插件,在网络请求中,vue是借助于vue-resource模块来进行异步请求,跨域请求。 vue-resource是Vue.js的一款插件,它可以

    2024年02月02日
    浏览(36)
  • 前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

    目录 一、前后端同步异步请求 1.同步请求: 2.异步请求: 3.跨域问题(前端问题) 4.axios框架(封装后) 二、后端向前端响应多个数据-JSON 1.同步请求:         发送一个请求,回应请求,回应的内容会覆盖浏览器中的内容,这样会 打断 前端其他的正常操作。 2.异步请求:

    2024年02月07日
    浏览(54)
  • 前端随笔:HTML/CSS/JavaScript和Vue

    最近因为工作需要,需要接触一些前端的东西。之前虽然大体上了解过 HTML 、 CSS 和 JavaScript ,也知道 HTML 定义了内容、 CSS 定义了样式、 JavaScript 定义了行为,但是却没有详细的学习过前端三件套的细节。而最近的工作中需要使用 Vue ,并且想到未来的工作中使用 Vue 能够更

    2024年02月16日
    浏览(33)
  • axios 各种方式的请求 示例

    示例一: 服务端代码 前端代码 示例二: 服务端代码 前端代码 GET方式采用接口方式携带参数,比如上面示例最终请求服务器端的url是: 示例一: 服务端代码 前端代码 结果: 示例二: 服务端代码 前端代码 结果: 示例三: 服务端代码 前端代码 请求的url为:http://localhos

    2024年02月11日
    浏览(16)
  • 前端数据请求的10种方式与最佳实践

    在前端开发中,数据请求是经常遇到的一个问题。本文将介绍前端常见的10种数据请求方式,并给出每个方式的代码示例与使用场景,以帮助开发者更好的选择和使用。 Fetch API 是浏览器内置的一个用于网络请求的全局接口,可以使用它来发送HTTP请求并获取响应数据。 Fetch API 使用

    2024年02月11日
    浏览(24)
  • CRM项目为新增用户设置对应的前端校验规则并发送Axios请求到后端将表单数据提交用户信息------CRM项目

    template     el-button type=\\\"primary\\\" @click=\\\"addUser()\\\"新增用户/el-button     el-button type=\\\"danger\\\"批量删除/el-button     el-table         :data=\\\"userList\\\"         style=\\\"width: 100%\\\"         @selection-change=\\\"handleSelectionChange\\\"             !-- 复选框    --         el-table-column type=\\\"selection\\\" width=\\\"33%\\\"

    2024年02月19日
    浏览(32)
  • 使用 Axios 实现前端网络请求

    在现代的 Web 开发中,网络请求是不可或缺的一部分。前端开发者需要与后端服务器通信以获取数据、发送表单、或者执行其他操作。在过去,开发者通常使用 XMLHttpRequest (XHR) 对象来处理这些请求,但现在有了更加现代化和简洁的解决方案,其中一种就是 Axios。 Axios 是一个基

    2024年03月23日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包