put请求时传参的格式

在前后端交互项目中,前端调用接口时,apifox测试能成功获取数据,但浏览器显示请求参数错误。原因是调用接口数据时未以键值对方式,put请求参数不能直接拼接调用。在Vue组件引入接口,定义数组接收数据,调用方法后,数据应以键值对形式展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在前后端交互的项目中,我在前端调用接口的时候,发现在apifox里面进行发送测试的时候数据是可以获取成功的,但是在浏览器总是显示

 请求参数错误   【原因在于调用接口里面的数据的时候直接调用了需要的数据】

而它需要以键值对的方式进行

键值数据库是一种非关系数据库,它使用简单的键值方法来存储数据。键值数据库将数据存储为键值对集合,其中键作为唯一标识符。键和值都可以是从简单对象到复杂复合对象的任何内容。

 methods: {
        // 开关切换
        onChange(index) {
            console.log(this.allDepList[index].dept_id);
            requpdate(this.allDepList[index].dept_id).then(res => {
                console.log(res, '是否开启考勤');
            })
        },

这是一个put请求所以传递的,所以里面的参数不能直接拼接调用的形式,如下图

export const reqSubs = (subscriber, subscribee) => requests({ url: `/api/leave/SubscribeToSomeone?sub=${subscriber}&subscr=${subscribee}`, method: 'post' })

put请求在接口里面调用数据(如下图):

export const requpdate = (dept) => requests({ url: `/api/ding/dept/updateDept`, method: 'put', data: dept })

接口调用之后在对应的vue组件里面引入接口

import {  requpdate } from "@/api"

 定义数组来接收数据

export default{
data(){
return {
allList:[]    // 这里是自己定义的数组用来接收数据的
     }
   }
 }

之后在methods里面进行方法的调用

 methods: {
        // 开关切换
        onChange(index) {
            console.log(this.allList[index].dept_id);
            requpdate({ "dept_id": this.allList[index].dept_id }).then(res => {
                console.log(res, '是否开启考勤');
            })
        },

 更新成功之后获取的数据是以 data:{}  方式进行展示的,我们第一次进行调用的时候直接调用了对应的数,就是只获取了一个数而不是对象的存储格式所以需要加上括号,再以键值对的形式进行展示

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值