在使用axios这个ajax插件的时候,我们有些时候会遇到一些问题,比如:数据格式不正确

  以最简单的例子为基础(这里使用post方法):

  

  在上面的例子中我们直接调用axios的post方法,传给后台的参数为json格式,这和jquery的ajax写法相当类似!

  但是,axios发送的数据格式和jquery ajax发送的默认数据格式却不相同,接下来让我们来看一下不同之处:

  1.axios的数据类型

  

  2.jquery ajax的数据类型

  

  看到这里,有的小伙伴就要说了,修改下ContentType不就好了,其实不然,即时是修改了ContentType,数据依然不正确:

  --------------------->

  通过度娘的各种检索,终于找到了答案: 使用URLSearchParams来处理参数,URLSearchParams的兼容性并不高,所以使用的时候还是要注意(可以考虑使用babel来转换)

  具体的操作如下:

  ----------------->

  通过使用URLSearchParams的处理,我们就能像jquery ajax发送的数据一样了!!!

  

使用application / x-www-form-urlencoded格式


默认情况下,axios将JavaScript对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。

浏览器

在浏览器中,您可以使用URLSearchParams API,如下所示:

1
2
3
4
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

请注意,所有浏览器都不支持URLSearchParams,但是有一个polyfill可用(确保polyfill全局环境)。

或者,您可以使用qs库对数据进行编码:

1
2
var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

Node.js

在node.js中,可以使用querystring模块,如下所示:

1
2
var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });

你也可以使用qs库。

Promise


axios 依赖本机要支持ES6 Promise实现。 如果您的环境不支持ES6 Promises,您可以使用polyfill。

TypeScript


axios包括TypeScript定义。

1
2
import axios from 'axios';
axios.get('/user?ID=12345');

axios在很大程度上受到Angular提供的$http服务的启发。 最终,axios努力提供一个在Angular外使用的独立的$http-like服务。

本文章部分引用(https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams#Browser_compatibility,https://segmentfault.com/a/1190000005980048)

----------------------------------------------------------------------------------------

除了上面那些复制粘贴的,下面

重点来了,这是qs.stringify与JSON.stringify的区别

var a = {name:'hehe',age:10};
qs.stringify序列化结果如下

name=hehe&age=10

而JSON.stringify序列化结果如下:

 
"{"a":"hehe","age":10}"

  所以只要在传递参数时不按照json格式传递,反正最终都会转化成qs.stringify转化后的格式,所以只要传递时改为name=value的格式传递即可,php也会正常接收。

eg:

axios.post('../php/index.php','tel='+this.tel+'&pwd='+this.pwd+'&rpwd='+this.rpwd).then(function (response) {
alert(response.data);

php:

$tel1 = trim($_POST['tel']);

----------------------------------------------------------------------------------------

  

 

除了使用URLSearchParams处理axios发送的数据,但是兼容性不好,其他的兼容方法的更多相关文章

  1. 使用URLSearchParams处理axios发送的数据

    使用URLSearchParams处理axios发送的数据 在使用axios这个ajax插件的时候,我们有些时候会遇到一些问题,比如:数据格式不正确 以最简单的例子为基础(这里使用post方法): 在 ...

  2. 前端axios发送的数据后端接收不到(没有自动依赖注入)可能的原因

    前端请求头content-type没有进行正确设置,后端无法解析该类型数据,比如说: 后端若想接收json类型的数据,则需要配置相应的转换器,(spring中可使用@RequestBody注解),若没 ...

  3. axios 发送json数据

    var qs = require('qs'); axios.post(ajaxurl,qs.stringify({ username:'zhangsan', age:'18' })).then(fun ...

  4. 类型:Ajax;问题:ajax调用ashx参数获取不到;结果:ashx文件获取$.ajax()方法发送的数据

    ashx文件获取$.ajax()方法发送的数据 今天在使用Jquery的ajax方法发送请求时,发现在后台中使用ashx文件无法接收到ajax方法中传递的参数,上网查了一下原因后发现了问题所在,原来是 ...

  5. axios发送post请求,如何提交表单数据?

    axios发送post请求,提交表单数据的方式 默认情况下,axios将JavaScript对象序列化为JSON.要以application / x-www-form-urlencoded格式发送数据 ...

  6. vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题

    vue 集成axios之后,发送的post请求默认为payload 方式. 如果想改为正常的方式,需要增加headers头,并且将发送是数据json格式改为 querystring的方式. 安装依赖 ...

  7. vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)

    vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置 安装 axios ...

  8. vue2.0项目实战(3)使用axios发送请求

    在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...

  9. Vue笔记:使用 axios 发送请求

    在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...

随机推荐

  1. ubuntu11.0静态IP地址配置

    1. 静态IP地址配置 配置文件路径:/etc/network/interfaces auto lo iface lo inet loopback auto eth0 iface eth0 inet ...

  2. CLR 简介

    (一)CLR介绍 CLR是一个可以由多编程语言使用的运行时,CLR的核心功能:内存管理,程序集加载,安全性,异常处理,线程同步等等.可以被很多属于微软系列的开发语言使用. 事实上,在运行时,CLR根本 ...

  3. 数据结构与算法(1)----->排序

    这一版块,把必备的数据结构和算法做一个总结!包括排序.队列.链表.二叉树.排组合,动态规划....... 总结的过程包括理论部分,练题目可以自己去leetcode/牛客网刷起来- 第一篇文章讲排序- ...

  4. .24-浅析webpack源码之事件流compilation(2)

    下一个compilation来源于以下代码: compiler.apply(new EntryOptionPlugin()); compiler.applyPluginsBailResult(&quo ...

  5. 一致性哈希java实现

    值得注意的点 哈希函数的选择 murmur哈希函数 该函数是非加密型哈希,性能高,且发生哈希碰撞的概率据说很低 md5 SHA 可以选择guava包,提供了丰富的哈希函数的API 支持虚拟节点+加权, ...

  6. file_get_contents("php://input")的使用方法

    $data = file_get_contents("php://input"); //input 是个可以访问请求的原始数据的只读流. POST 请求的情况下,最好使用 php: ...

  7. Kafka 使用Java实现数据的生产和消费demo

    前言 在上一篇中讲述如何搭建kafka集群,本篇则讲述如何简单的使用 kafka .不过在使用kafka的时候,还是应该简单的了解下kafka. Kafka的介绍 Kafka是一种高吞吐量的分布式发布 ...

  8. git 简单入门

    首先了解一下git的是什么: [百度百科解释]Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.[2]  Git 是 Linus Torvalds 为了帮助管理 ...

  9. PHP获取中英文字符串的首字母

    使用场景:在对地区进行筛选时,我们经常会看到按照英文字母进行筛选定位,起初想着是数据表里存储上地区与首字母关联关系,但是觉得太麻烦,然后就想着根据地区名称来获取首字母,然后对地区进行分组,由此便用到了 ...

  10. JavaScript ES6 Arrow Functions(箭头函数)

    1. 介绍 第一眼看到ES6新增加的 arrow function 时,感觉非常像 lambda 表达式. 那么arrow function是干什么的呢?可以看作为匿名函数的简写方式. 如: var ...