详解vue使用$http服务端收不到参数


Posted in Javascript onApril 19, 2019

老夫子我正在憋方案书,听到身后传来细软的声音:“李哥,我这有个Bug调了很长时间了,您能帮我看一下吗?”。说这话的是我的好朋友,公司新来的前端小妹伊万卡。我起身向她走去,看到因长时间调试Bug漂亮的脸蛋上泛起的红晕,原来人会变的温柔,一点都不像我。

我使用vue中的http方法异步删除一个图片,后端怎么也接收不到我发的参数,同时还报个500。

听完伊万卡小妹描述的这个Bug临床表现,根据我多年的行医经验,已大体猜出病灶所在。但我并不想这么快结束这次义诊,你们是了解我的,让她透彻的懂了,才是我的选择。
老夫整理下外套,端庄的坐在了小妹的工位上,开始我的治病救人过程:望、闻、问、切。

一:望

在浏览器中把这个功能跑一下,打开调试窗口,找到这个XHR(XMLHttpRequest)请求连接,看Headers选项卡最下面,如下图所示

详解vue使用$http服务端收不到参数

Request Payload,请注意这个数据格式。

二:闻

打开伊万卡小妹写的代码,我终于看出了传说中诗的感觉,同样26个字母,小妹敲出来的就是好看。

this.$vux.confirm.show({
title: "提示",
content: "确定要删除此图片吗?",
onConfirm() {
that.$http({
method: "post",
url: `${that.$$baseURL}/upload/delBelowImg`,
headers: {
token: token,
'Content-Type':'application/json'
},
data:{
file:item.filePath,
id:id,
name:item.name
}
}).then(res => {});
}
});

 我发誓,以上代码绝对出自伊万卡之手,分毫未改。但当这个片段出现在我博文里时屁感觉没有,你说奇怪不奇怪。

三:问

我转头看向写java的川普,说:“小川,把你和伊万卡小妹对接的这个接口,代码发我一下”。5秒中之后,我收到了如下毫无美感的代码。

@RequestMapping(value = "/delBelowImg")
@Transactional
public void delBelowFile(@RequestParam Map<String, Object> params,HttpServletRequest request){
try {
……
} catch (Exception e) {
……
} 
}

@RequestParam 注意这个注解。

四:切

到这里我已经确切的知道了病因,我略作分析,在望环节,我们看到伊万卡小妹诗一样的代码发出请求,在浏览器发送请求参数格式是:
Request Payload,在问环节,看到小川写的代码,注解是@RequestParam,所以结果是,小妹发送的请求数据格式与小川的不统一,怪不得接受不到参数。
我在小妹的代码基础上略作改动如下(标红是改动部分):

const data = {
file:item.filePath,
id:id,
name:item.name
}
this.$vux.confirm.show({
title: "提示",
content: "确定要删除此图片吗?",
onConfirm() {
that.$http({
method: "post",
url: `${that.$$baseURL}/upload/delBelowImg`,
headers: {
token: token,
'Content-Type':'application/json'
},
params:data
}).then(res => {});
}
});

我再次打开浏览器,这次发送参数的格式成了 Query String Parameters,如下图所示

详解vue使用$http服务端收不到参数

服务端成功接受到了参数,图片正常删除,伊万卡小妹脸上又有了笑容,连看我的眼神也更坚定了,好像再说这个男人没错。我知道我们的革命友谊又升华了。我对尹万卡小妹露出了无产阶级标志性笑容?

在伊万卡小妹问出“为什么”三个字时,我赶紧跑回了工位。

Bug是流动的
不由人的
何必激动着要理由

扩展:
有兴趣的同学请自行了解以下异步请求格式区别,要知道前方有个伊万卡小妹妹在等你解答呢,还不滚去学习。
前端:
Request Payload
Form Data
Query String Parameters
后端:
@RequestParam
@RequestBody

以上所述是小编给大家介绍的vue使用$http服务端收不到参数详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
ES6入门教程之let和const命令详解
May 17 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
原生js实现自定义消息提示框
Nov 19 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 #Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 #Javascript
读懂CommonJS的模块加载
Apr 19 #Javascript
js module大战
Apr 19 #Javascript
如何根据业务封装自己的功能组件
Apr 19 #Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 #Javascript
vue组件之间的数据传递方法详解
Apr 19 #Javascript
You might like
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python绘制3D图形
2018/05/03 Python
python中强大的format函数实例详解
2018/12/05 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python数据类型之List列表实例详解
2019/05/08 Python
python读取mysql数据绘制条形图
2020/03/25 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
Python如何telnet到网络设备
2021/02/18 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
环境工程专业个人求职信
2013/12/05 职场文书
关于期中考试的反思
2014/02/02 职场文书
趣味体育活动方案
2014/02/08 职场文书
人事任命书怎么写
2014/06/05 职场文书
奖励申请报告范文
2015/05/15 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
数据库之SQL技巧整理案例
2021/07/07 SQL Server