axios 访问data类型和.net core 后端对应接收

一、关于get和post方法采用的参数类型

1、get用到的data类型一般为query和params,由于请求url有最大限制,常用于参数和参数值比较小的场景,也是比较常用的场景。

data类型:query是拼接参数紧接到url后面,

javascript 复制代码
axios.get('/api/data?param1=value1&param2=value2')
    .then(response => {
        // 处理响应
    })
    .catch(error => {
        // 处理错误
    });

params是 参数单独放在查询参数的params里面

javascript 复制代码
axios.get('/api/data', {
    params: {
        param1: 'value1',
        param2: 'value2'
    }
})
.then(response => {
    // 处理响应
})
.catch(error => {
    // 处理错误
});

对应的后端代参数为[FromQuery]码如下:

cs 复制代码
 [HttpGet]
    public IActionResult Get(string param1, string param2)
    {
        // 你的逻辑
        return Ok(new { param1, param2 });
    }

二、post方法常用于数据量大的场景,常用的data类型分别是data和params

需要内容形式为'Content-Type': 'multipart/form-data'和FormData结合使用,在网页里显示的位置也不一样,可以结合使用

1、当data类型为params时,携带查询参数值

javascript 复制代码
let formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');
axios.post('/api',  {
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    params:formData
})
.then(response => {
    // 请求成功处理逻辑
})
.catch(error => {
    // 请求失败处理逻辑
});

对应后端数据参数需要加上FromForm

cs 复制代码
[HttpGet]
    public IActionResult api([FromForm]string param1, [FromForm]string param2)
    {
        // 你的逻辑
        return Ok(new { param1, param2 });
    }

2.当data为data时,发送数据

javascript 复制代码
let formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');
axios.post('/api', {
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    data:formData
})
.then(response => {
    // 请求成功处理逻辑
})
.catch(error => {
    // 请求失败处理逻辑
});
cs 复制代码
[HttpGet]
    public IActionResult api([FromForm]string param1, [FromForm]string param2)
    {
        // 你的逻辑
        return Ok(new { param1, param2 });
    }

3.FromForm和FromBody的用法区别:前者是明确的参数值类型,后者则是不需要明确的参数值类型,常用做对象

相关推荐
方才coding43 分钟前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
man20171 小时前
【2024最新】基于springboot+vue的闲一品交易平台lw+ppt
vue.js·spring boot·后端
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
前端小超超1 小时前
vue3 ts项目结合vant4 复选框+气泡弹框实现一个类似Select样式的下拉选择功能
前端·javascript·vue.js
咩咩觉主1 小时前
尽量通俗易懂地概述.Net && U nity跨语言/跨平台相关知识
unity·c#·.net·.netcore
大叔是90后大叔1 小时前
vue3中查找字典列表中某个元素的值
前端·javascript·vue.js
幸运小圣1 小时前
Vue3 -- 项目配置之prettier【企业级项目配置保姆级教程2】
前端·vue.js·vue
ZJ_.1 小时前
Electron 沙盒模式与预加载脚本:保障桌面应用安全的关键机制
开发语言·前端·javascript·vue.js·安全·electron·node.js