使用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. 从原型链探究Javascript这么火的原因

    首先,此文是对于javascript原型链的一些私人见解,若能博君会心一笑,在下荣幸之至! 为了阐述我的理解,首先提前声明一些前置知识,欢迎指正: 栈内存和堆内存: 栈内存每个地址分配的地址长度较窄, ...

  2. C# Cookie方法

    //写入 protected void Button1_Click(object sender, EventArgs e) { HttpCookie cookie=new HttpCookie(&qu ...

  3. RobotFramework-RIDE环境搭建二:Robot Framework-RIDE安装过程以及踩雷点

    前期准备工作: Python 2.7(上篇文章中已安装成功) Robot Framework-2.8.5 Robot Framework-RIDE-1.5.2.1 (测试用例的创建.运行可以在图形界面 ...

  4. JZ2440支持设备树(1)-添加设备树之后kernel的启动参数跟dts里面不一致

    在做之前参考了如下博客文章,再次非常感谢: http://www.cnblogs.com/pengdonglin137/p/6241895.html Uboot中需要在config中添加如下宏: #d ...

  5. tensorboard No graph definition files were found No scalar data was found 解决方法

    logdir后面的路径不要加引号!!!! tensorboard --logdir='D:\WorkSpace\eclipse\tf_tr\train\my_graph\' 删除引号,改为: tens ...

  6. python函数之可迭代对象、迭代器的判断

    怎么判断一个对象是可迭代对象还是迭代器 例子 from collections import Iterable, Iterator lst = ['Today is Wednesday', 'Tomo ...

  7. JAVA基础搬运工

    1Java线程的6种状态及切换 https://blog.csdn.net/pange1991/article/details/53860651/ 2进程和线程的区别 https://www.cnbl ...

  8. javascript中的立即执行函数的原理

    形如 ((function Test(a) { //code here... })('Hello')); 被称作立即执行函数. 首先需要了解的是,这并不是一种hack,这是javascript的基本语 ...

  9. python requests 请求禁用SSL警告信息解决

    Python3 requests模块发送HTTPS请求,关闭SSL 验证,控制台会输出以下错误: InsecureRequestWarning: Unverified HTTPS request is ...

  10. java-使用icepdf实现pdf转换成png

    下载icepdf的架包,并导入项目中,这里用到4个,如下: /** * 本地pdf文件转png */ public static int pdf2pngByFile(String target){ S ...