详解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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
vue设置默认首页的操作
Aug 12 Javascript
用javascript制作qq注册动态页面
Apr 14 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 rand()造成CPU 100%的解决办法
2010/05/18 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
php单例模式实现方法分析
2015/03/14 PHP
比较完整的微信开发php代码
2016/08/02 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
python 线程的五个状态
2020/09/22 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
房地产端午节活动方案
2014/08/24 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
交警失职检讨书
2015/01/26 职场文书