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的用法区别:前者是明确的参数值类型,后者则是不需要明确的参数值类型,常用做对象

相关推荐
麻辣_水煮鱼1 小时前
vue数据变化但页面不变
前端·javascript·vue.js
计算机毕设孵化场3 小时前
计算机毕设-基于springboot的多彩吉安红色旅游网站的设计与实现(附源码+lw+ppt+开题报告)
vue.js·spring boot·后端·计算机外设·课程设计·计算机毕设论文·多彩吉安红色旅游网站
小王码农记3 小时前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
战神刘玉栋3 小时前
《SpringBoot、Vue 组装exe与套壳保姆级教学》
vue.js·spring boot·后端
乐闻x4 小时前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js
理想不理想v4 小时前
【经典】webpack和vite的区别?
java·前端·javascript·vue.js·面试
xChive5 小时前
优化表单交互:在 el-select 组件中嵌入表格显示选项
前端·vue.js·交互·element-plus
_jacobfu5 小时前
mac2024 安装node和vue
前端·javascript·vue.js
羽羽Ci Ci6 小时前
axios vue.js
前端·javascript·vue.js
axihaihai6 小时前
购物街项目TabBar的封装
vue.js