详解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 相关文章推荐
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
在JavaScript中使用timer示例
May 08 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
javascript实现简单搜索功能
Mar 26 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
php 中的str_replace 函数总结
2007/04/27 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
header导出Excel应用示例
2014/01/24 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
简单的自定义php模板引擎
2016/08/26 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Python最小二乘法矩阵
2019/01/02 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
Python中logger日志模块详解
2020/08/04 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
单位委托书怎么写
2014/08/02 职场文书
高中生毕业评语
2014/12/30 职场文书