使用URLSearchParams处理axios发送的数据

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

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

  

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

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

  1.axios的数据类型

  

  2.jquery ajax的数据类型

  

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

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

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

  具体的操作如下:

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

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

  题外:

  URLSearchParams具体是什么,能处理哪些东西,而它的API又有哪些?我这里贴点链接吧,大家可以更好的学习和理解~~~~

  https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams#Browser_compatibility

  https://segmentfault.com/a/1190000005980048

使用URLSearchParams处理axios发送的数据的更多相关文章

  1. 除了使用URLSearchParams处理axios发送的数据,但是兼容性不好,其他的兼容方法

    在使用axios这个ajax插件的时候,我们有些时候会遇到一些问题,比如:数据格式不正确 以最简单的例子为基础(这里使用post方法): 在上面的例子中我们直接调用axios的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. axios发送post请求,如何提交表单数据?

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

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

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

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

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

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

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

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

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

  9. vue2.0项目实战使用axios发送请求

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

随机推荐

  1. 锋利的jQuery初学(2)

    js与jq事件处理程序区别: 1,事件源:   document.getElementById('id');   $("#id") 2,事件:   document.getElem ...

  2. LeetCode 922. Sort Array By Parity II C++ 解题报告

    922. Sort Array By Parity II 题目描述 Given an array A of non-negative integers, half of the integers in ...

  3. JDK新特性之可变个数的形参的方法

    可变个数的形参的方法:1.格式:对于方法的形参来说:数据类型...形参名2.可变个数的形参的方法与同名的方法之间可以构成重载3.可变个数的形参在调用时,个数从0开始,到无穷都可以(在调用这个方法时,s ...

  4. C语言学习笔记之位运算求余

    我们都知道,求一个数被另一个数整除的余数,可以用求余运算符”%“,但是,如果不允许使用求余运算符,又该怎么办呢?下面介绍一种方法,是通过位运算来求余,但是注意:该方法只对除数是2的N次方幂时才有效. ...

  5. scipy 的K-means

    #导入相应的包 import scipy import scipy.cluster.hierarchy as sch from scipy.cluster.vq import vq,kmeans,wh ...

  6. The Oregon Trail 俄勒冈之旅

    发售年份 1971 平台 多平台 开发商 MECC 类型 教育娱乐 https://www.youtube.com/watch?v=QBOLN7I8omY

  7. Django学习笔记之URL与视图cookie和session

    cookie和session cookie:在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是为了 ...

  8. Day 18 常用模块(二)

    一.随机数:RANDOM 1.(0,1)小数:random.random() 2.[1,10]整数:random.randint(1,10) 3.[1,10)整数:random.randrang(1, ...

  9. python安装media报错

    Try https://pypi.python.org/pypi/setuptools easy_install LEE 我后来,依次在Python2.7中装了 numpy-1.7.0-win32-s ...

  10. pycrypto安装出错的问题 intmax_t C:\Program Files (x86)\Windows Kits\10\include\10.0.10240.0\ucrt\inttypes.

    前言: 需要安装 Microsoft Visual Studio2017 Community 或者buildtools 解决方案一(解决了python3.7上安装pycrypto-2.6.1的错误问题 ...