Vue axios 将传递的json数据转为form data的例子

修改main.js文件中axios的配置：

在发送请求前将数据用qs模块转化

修改请求头的Content-Type='application/x-www-form-urlencoded'

具体配置如下：

import axios from 'axios'
import qs from 'qs'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
 if(config.method!='get'){
  config.data=qs.stringify(config.data);
 }
 config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
 return config;
},function (error) {
 return Promise.reject(error)
})

以上这篇Vue axios 将传递的json数据转为form data的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • axios post提交formdata的实例

    vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vue组件中使用axios.但之前做着玩用的都是get请求,现在我自己搭博客时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数.后来进过一番探索,终于发现问题所在. post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见的post编码方式,一般的表单提交默认以此方式提交.大部分服务器语言对这种方式都有很好的支持.在PHP中,可以

  • Vue 设置axios请求格式为form-data的操作步骤

    Cover 在Vue中使用axios 这个老生常谈了,还是先记录一遍,方面后面自己查. !!! 设置form-data请求格式直接翻到后面看. 1. 安装axios 在项目下执行npm install axios. 之后在main.js中,添加: import axios from 'axios' //引入 //Vue.use(axios) axios不能用use 只能修改原型链 Vue.prototype.$axios = axios 2. 发送GET请求 axios封装了get方法,传入请求

  • 使用axios发送post请求,将JSON数据改为form类型的示例

    通常前端通过POST请求向服务器端提交数据格式有4中,分别是"application/x-www-form-urlencoded"格式." multipart/form-data"格式."application/json"格式和"text/xml"格式.通常最常见的是"application/json"格式,也就是通过JSON字符串形式. 在控制台看到的数据就是这样: 有的时候后台需要Form形式的数据才能

  • 使用axios请求时,发送formData请求的示例

    最近做的一个项目中有一个特例接口,传json后端接收不到,对接的后端又不愿意改接口,只能用formData方式传参,由于好多年没有用过formData,头痛了一会,找到了解决方法,发现非常简单,在此做个笔记! var formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountnum", 123456); fetch('/us

  • 详解vue axios用post提交的数据格式

    vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vue组件中使用axios.但之前做着玩用的都是get请求,现在我自己搭博客时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数.后来进过一番探索,终于发现问题所在. post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见的post编码方式,一般的表单提交默认以此方式提交.大部分服务器语言对这种方式都有很好的支持.在PHP中,可以

  • Vue axios 将传递的json数据转为form data的例子

    修改main.js文件中axios的配置: 在发送请求前将数据用qs模块转化 修改请求头的Content-Type='application/x-www-form-urlencoded' 具体配置如下: import axios from 'axios' import qs from 'qs' // 添加请求拦截器 axios.interceptors.request.use(function (config) { if(config.method!='get'){ config.data=qs

  • vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    本文实例讲述了vue.js实现数据库的JSON数据输出渲染到html页面功能.分享给大家供大家参考,具体如下: 1.首先通过json.php把数据库给输出为json格式的数据 [ { "id":1, "resname":"百度", "resimg":"http://www.baidu.com/1.jpg", "resint":"2018-1-18", "re

  • 如何处理后台向前台传递的json数据

    这篇文章主要介绍了如何处理后台向前台传递的json数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在pom文件中添加下面三种依赖jar包 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.9.8<

  • C#中把Json数据转为DataTable

    简单 /// <summary> /// 将json转换为DataTable /// </summary> /// <param name="strJson">得到的json</param> /// <returns></returns> public static DataTable JsonToDT(string strJson) { //转换json格式 strJson = strJson.Replace(&

  • Bootbox将后台JSON数据填充Form表单的实例代码

    序言: 刚结束公司的三个月试用期,意味着我即将正式步入社会成为广大从事IT行业的一员.作为一个编程小白,无论从技术层面还是知识层面都是比较薄弱的,想要成为一个优秀的程序员不断的学习与探索是不可避免的.我相信一切的付出与收获是成正比的!Fighting! 这几天在做公司的实际项目的时候,需要实现选中Bootstrap table中的任意一行数据点击编辑按钮弹出一个模态框以表单的形式对该行数据进行编辑.获取表格行的数据是比较方便的,具体可以查找Bootstrap table参考文档,具体地址可以直接

  • vue里的axios如何获取本地json数据

    vue里的axios如何获取本地json数据

    目录 使用axios获取本地json数据 使用axios获取本地json文件,报404错 解决方案:main.js里 使用axios获取本地json数据 第一步:在已有的vue项目中安装axios命令 npm install --save axios 第二步:在main.js里导入下面的代码 import axios from 'axios' 第三步:在static文件夹下添加testData文件夹,在这个文件夹下添加data.json文件 第四步:在需要数据的页面引入axios,异步加载数据

  • vue如何使用模拟的json数据查看效果

    vue如何使用模拟的json数据查看效果

    目录 使用模拟的json数据查看效果 具体方法如下 vue模拟数据,数据交互 mock数据 $nextTick() 数据交互 使用模拟的json数据查看效果 在数据交互这一块,很多时候是要和后台进行沟通配合的,作为初学者或者纯前端的学习者,我们不可能经常有后台配合自己来展示,那么怎样才能模拟类似的效果呢? 后台传来的值其实也是一种json格式的数据,我们只需要模拟json形式的内容即可. 具体方法如下 1)封装一个json的文件,里面存放需要的数据,在webpack环境下放置在common文件夹

  • vue如何加载本地json数据

    vue如何加载本地json数据

    目录 vue加载本地json数据 json数据存放在除static静态文件夹中 json数据存放在static静态文件夹中 读取本地json文件并分页显示 功能实现 student.json数据如下 h5代码如下 css样式 js代码 运行效果 vue加载本地json数据 json数据存放在除static静态文件夹中 这种方法暂时还没出来,若有大神知道,可否能指导一二 json数据存放在static静态文件夹中 1.编写好json 数据,按照这个格式编写json数据 2.安装axios 安装方法

  • 使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇

    使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇

    调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化; 如果提交的数据使用复杂的json数据,例如: {userId:32323,userName:{firstName:"李",lastName:"李大嘴"}} 那么服务器是无法正常接收到完整的参数,因为jQuery对data的序列化,是使用了键值对拼装的方式; 参数拼装成 userId=32323&userName=object ; userName所指向的对象

  • 详解Obejective-C中将JSON数据转为模型的方法

    在我们的日常开发中需要对加载的一些本地数据例如plist.json等文件中的数据进行模型转化,而苹果也为我们提供了一种非常方便的键值转换方式KVC.然而KVC在某些情况下并不能保存数据的转换成功,比如必须保证模型的属性个数大于等于字典个数,也要必须属性名称与字典的key相同等.所以这次我们假设下属性名称与字典中的key不一致的时候转换方法. 首先我们还是先要尝试下使用KVC的方式来解决这个问题 模型如下: 复制代码 代码如下: @property (nonatomic, strong) NSSt

随机推荐