详解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 web对话框与弹出窗口
Feb 22 Javascript
浅析return false的正确使用
Nov 04 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP制作万年历
2015/01/07 PHP
php实现微信扫码支付
2017/03/26 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
Python计算信息熵实例
2020/06/18 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
Python Map 函数的使用
2020/08/28 Python
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
农村婚礼主持词
2014/03/13 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python