问题来源: 在使用axios时,和java联调,发现调接口服务器始终拿不到参数data,但是检查network也的确传了data,才有了该文章。

基于 vue-axios 和 $.ajax 两种请求方式中数据传输的思考

以java为例,数据传输的起源:

一开始,Java为了实现前后端通信,在http协议允许下,制定了数据传输必须遵守的规则:

1) 数据传输 仅允许 以 字符串 或者 二进制流数据的方式传输, number object等格式 都不允许。

2) 规定了字符串数据传输的内容类型格式,即content-type,有以下几种:

a) 底层的xmlhttprequest 默认的Content-Type 是 text/plain;charset=UTF-8
       即: 数据可以为  “aaaa” , “[12313],{dsafdsafsd:12313}”

b) 原生的Form表单提交, 对 xmlhttprequest 的字符串数据加了规则校验,
       即 字符串数据 必须以key-value的方式存在,以便区分参数,于是键值对的概念出现了。
       键值对以 & 隔开, 如:  username=1111 & password=2222
       为了和 以前的数据类型区分,则修改 Content-Type 为 application/x-www-form-urlencoded
       
       并且以 input 的 name 为 键,value为值, 多个 input 以 & 隔开

<form>
           <input name=“username” value=“1213”/>
           <input name=“password” value=“321”/>
       </form>

submit的时候,将 获取所有 input 的键值对,形成  data: “username=1213&password=321”
        发送到了后台,后台接受到该字符串,

c) 随着互联网发展,数据传输越来越复杂,form已经不足以满足需求。
       于是ajax出现了,并且 首先实现了 form 表单提交的功能
       即 Content-Type 为 application/x-www-form-urlencoded,且数据传输为 键值对格式。
       但是在 书写方式上, data以 Object 的形式 书写,内部实现将 Object 转为 字符串键值对

又发展了一段时间, 出现了 一个新的 表述 key-value字符串数据的的方式,称之为 JSON,
       符合JSON格式的字符串 也让服务器 很方便的获取参数。
       Ajax 又实现了该种传参,
       于是 ajax的 data:{username: 1213, password: 321} ,
       最终传输时被 JSON.stringify(data) =>  “{“username”: 1213, “password”: 321}”
       而服务器,则 JSON.parse(data),拿到了 data Object

为了区分该种数据格式,则修改 Content-Type 为 application/json

d) 又发展了一段时间,简单的字符串传输也不满足了,想传输文件,word,excel,txt,图片等,即文件流传输
       则由提出 一种数据内容格式,规定数据以 二进制 传输
       并修改Content-Type 为 multipart/form-data

e)。。。。。

汇总content-type:
   1)text/plain;charset=UTF-8
   2)application/x-www-form-urlencoded   浏览器以 FormData 体现
   3)application/json                    浏览器以 requestPayload 体现
   4) multipart/form-data 
   5)。。。。。。

以前的java服务器,为求代码简单,规定传输的字符串数据格式为 application/x-www-form-urlencoded,
所以 form 表单提交 和 $.ajax 都是默认 application/x-www-form-urlencoded

而后续 java出现各种框架, 如spring, 可以解决多种 传参方式,如 application/json
后续的 第二代/三代 ajax,如 搭配vue的axios,都将默认的Content-Type修改为 application/json,

例子:
 Vue项目倘若用了axios,而java的兄弟接收不到参数的话,则
 1)必须修改 content-type类型为 application/x-www-form-urlencoded
 2)还原键值对数据格式,通过qs模块(不需要安装,node自带的)转换数据格式即可

具体如下:(这里是在拦截器里进行设置,具体情况自己对照着处理)
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

axios.interceptors.request.use(config => {
  if(config.method  === 'post'){
        config.data = qs.stringify(config.data);
    }
  return config
}, error => {
  // Do something with request error
  Promise.reject(error)
})

其他的类ajax 也是一样解决。

vue post请求 参数带有中文后端无法接收或者收到乱码,无法返回数据问题的更多相关文章

  1. tomcat中的URL参数为中文,servlet接收后显示乱码

    URL中参数的值为中文时,servlet接收后显示为乱码,如下图: 这时候需要修改tomcat的中的server.xml文件.该文件路径为 tomcat安装目录下的conf文件夹.   为修改前的se ...

  2. 【C#】POST请求参数含中文,服务器解析得到乱码

    问题:POST请求参数含有中文,已将含中文的string以UTF-8编码格式转为byte[],并写入到请求流中,但服务器收到数据后以UTF-8解码,得到的依然是乱码! 百度到了以下方法,但依然无法解决 ...

  3. linux curl http get 请求中带有中文参数或者特殊字符处理

    在使用c++去请求http服务的时候,使用的是著名的curl工具提供的类库 libcurl,但是在使用的过程中发现,如果请求的参数值带了空格或者是参数是中文,会导致响应的回调函数没有被执行,虽然cur ...

  4. GET请求参数为中文时乱码分析

    问题描述 近期做任务时,跟后端联调时遇到一个问题,前端发送get请求,当参数值有中文时,请求失败,请求参数变为乱码.(ps:一般当参数有中文时,很少使用get请求,而是使用post请求来传输数据,请求 ...

  5. ajax请求参数为中文乱码的情况

    解决中文乱码问题的方法有很多. 一.前提是ajax请求传递参数对象到后台,对象中的某个参数的值为中文,到后台之后出现乱码,导致报错.问题解决如下: rest层: 二.在tomcat的server.xm ...

  6. 解决请求参数的中文乱码问题(get、post)

    2018-11-28 在web请求与响应中,会遇到乱码问题,比如填写表单数据时,难免会输入中文,姓名.公司名称等.由于HTML设置了浏览器在传递请求参数时,采用的编码方式是UTF-8,但在解码时采用的 ...

  7. get请求参数为中文,参数到后台出现乱码(注:乱码情况千奇百怪,这里贴我遇到的情况)

    前言 get请求的接口从页面到controller类出现了乱码. 解决 参数乱码: String param = "..."; 使用new String(param.getByte ...

  8. SQL查询语句中参数带有中文查询不到结果

    今天写个小demo的时候发现sql语句里面的username为中文的时候就不能查到正确结果,sql语句如下: String sql = "select * from user where u ...

  9. URL参数带中文,后台接收乱码解决方案

    1.前台中文参数用encodeURIComponent()进行编码,如: var textName= encodeURIComponent(name); 2.对整个URL用encodeURI()进行编 ...

随机推荐

  1. 进程,线程,Event Loop(事件循环),Web Worker

    线程,是程序执行流的最小单位.线程可与同属一个进程的其他线程共享所拥有的全部资源,同一进程中的多个线程之间可以并发执行.线程有就绪,阻塞,运行三种基本状态. 阮一峰大神针对进程和线程的类比,很是形象: ...

  2. 教你高效使用数据可视化BI软件创建医院卫生耗材运营监控大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以医院卫生耗材运营监控大屏 ...

  3. LCN解决分布式事务原理解析+项目实战(原创精华版)

    写在前面: 原创不易,如果觉得不错推荐一下,谢谢! 由于工作需要,公司的微服务项目需解决分布式事务的问题,且由我进行分布式事务框架搭建和整合工作. 那么借此机会好好的将解决分布式事务的内容进行整理一下 ...

  4. Java 添加、读取、删除Excel文本框

    本文介绍通过Java程序添加文本框到Excel的方法,添加文本框时,可以添加文本.设置文本方向.文本对齐方式.设置文本框大小.位置.填充色/填充图片.文本框旋转角度.文本框名称.可选文本.文本框隐藏或 ...

  5. java批量处理

    最近用到Java批量处理,一次性处理多个文件夹下的多个文件,在此记录一下. 我的思路:首先要保证文件夹和文件夹下的文件的命名是有规律的,利用for循环,每次自增变量,再拼接字符串,从而得到各个文件的路 ...

  6. turtle学习笔记

    1.turtle的绘图窗体 turtle.setup(width, height, startx,starty) - setup()设置窗体大小及位置- 4个参数中后两个可选(后两个省略时默认窗口在屏 ...

  7. C结构体与链表

    今天来总结C语言的学习盲点--结构体,为了不显单一,也为了补足作者链表的编程缺陷,特更此博文,总结近段时间的学习成果.话不多说,先上一段代码 struct none{int item; link ne ...

  8. CSS每日学习笔记(1)

    7.30.2019 1.CSS 文本属性 属性 描述 color 设置文本颜色 direction 设置文本方向. line-height 设置行高. letter-spacing 设置字符间距. t ...

  9. Webpack中SplitChunksPlugin 配置参数详解

    代码分割本身和 webpack 没有什么关系,但是由于使用 webpack 可以非常轻松地实现代码分割,所以提到代码分割首先就会想到使用 webopack 实现. 在 webpack 中是使用 Spl ...

  10. JMeter报错:Address already in use : connect

    Address already in use : connect的解决办法: 修改操作系统注册表1.打开注册表:regedit2.找到HKEY_LOCAL_MACHINE\SYSTEM\Current ...