当前位置: 首页 > Web前端 > vue.js

vue表单中的数据通过axios发送到formdata后端接口

时间:2023-03-31 17:01:42 vue.js

公司内部老项目用vue重构。在vue中,表单和数据动态绑定两个方向,获取表单数据后,使用axios发送给后端API。这是一个很常见的操作,但是请求一直失败。因为后台长期无人管理,所以除了api什么资料都查不到。前端是jquery写的,ajax发送。通过chrome调试shishan(老项目)后,发现发送参数的格式是"id=1&name=lee',当时还以为是以字符串的形式发送的(没学过)好吧,我会复习一下),然后我看到我用axios以json对象的形式发送{id:1,name:'lee'}所以猜测是请求失败是因为格式的parameterwasincorrect.首先想到的是用正则表达式转成字符串,容易误导人,不写了。先用JSON.parse()把JSON字符串转成对应的然后用正则的.replace方法,这个好用,但是看着各种正则感觉很别扭,总觉得不应该这样,于是下班翻了一下ES5语法,找到了一个URLSearchParams对象用于构造、解析和处理URL的查询字符串,即将一个对象变为id=1&nam的格式e=lee(大白话),就是所谓的URL查询字符串,也是地址栏中URL问号后面的部分。使用方法非常简单。toString方法用于转换为字符串。letparams=newURLSearchParams({id:1,name:'lee'});console.log(params.toString())//'id=1&name=lee'第二天上班后就用了这个方法,请求成功。然后查看为什么需要在vue中转换请求,但是在老项目jq中请求是正常的。原因是请求方式不同。原来jqajax是用formdata传参的,而axios是用payload传参的。虽然之前上传文件的时候知道什么是formdata,但是说实话第一次知道,还是有区别的。好像要学的东西太多了。提供最无脑的方法,接手新API,先在chrome调试中看请求头,如果是application/x-www-form-urlencoded,就是formdata形式。否则,它不是。