首页 分享 vue Axios 向后端提交参数 请求头 json 方式(Content

vue Axios 向后端提交参数 请求头 json 方式(Content

来源:萌宠菠菠乐园 时间:2024-09-16 11:41

import axios from 'axios' export default { name: 'basetable', data() { return { tableData: [], pageData:{ currentPage:1, total:0, pageSize:20, } } }, mounted() { this.getTableData(); }, methods: { getTableData(){
         //循环添加参数 let params = new URLSearchParams(); for(var key in this.pageData){ params.append(key,this.pageData[key]) } axios.post('http://localhost:8080/api/ptNotice/selectAll',params).then((response) => { console.log(response); this.tableData = response.data.items; this.pageData.total=response.data.totalNum; this.pageData.pageSize=response.data.pageSize; alert(this.pageData.pageSize); }).catch((response) => { console.log(response.error) }) },

  后端接收

@RequestMapping("/selectAll") public PageVo<PtNoticeVo> select(PtNoticeVo ptNoticeVo, Integer currentPage,Integer pageSize) { return ptNoticeService.selectAll(ptNoticeVo, currentPage, pageSize); }

参数会自动匹配

这种入参匹配到的参数是以非集合形式存在的

如果你要匹配后端的list参数 例如 List<String> 类型 或者List<Map<String,String>> 类型

则必须使用下面的方法才方可

第二种匹配方式 后端才用@requestBody方式接收

data: function(){ return { saveNoticeForm:{ //发送范围部门 toSendOrgs:[], //发送范围员工 toSendUsers:[], //标题 noticeTitle:'', //正文 noticeInfo:'', //类别 type:'', //附件 ptNoticeAccessorys:[], //作者 authorUserName:'', },

  saveNoticeForm直接作为参数提交

axios.post('http://localhost:8080/api/ptNotice/save',this.saveNoticeForm,{ headers: { 'Content-Type':'application/json;charset=UTF-8' } }).then((response) =>{ console.log(response); this.$message.success('提交成功!'); this.reload(); this.$router.push({path:'/notice'}); }).catch((response) =>{ this.$message.console.error('提交失败'); })

 后端接收方式 @RequestBody

@RequestMapping("/save") public PtNoticeVo save(@RequestBody PtNoticeVo ptNoticeVo){ return ptNoticeService.save(ptNoticeVo); }

相关知识

vue Axios 向后端提交参数 请求头 json 方式(Content
基于Vue3+Node Koa+WebSocket实现的“宠物收养交流平台”这是一个宠物收养交流平台web应用,主要分为
Http POST 提交数据的四种方式解析
基于SpringBoot + Vue的宠物医院管理系统
基于vue框架的宠物领养系统l3a76(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
优惠券资源提交
宠物管理之家
C# 模拟提交带附件(input type=file)的表单
[独有源码]java
毕设项目:爱宝贝宠物交流管理系统(JSP+java+springmvc+mysql+MyBatis)

网址: vue Axios 向后端提交参数 请求头 json 方式(Content https://www.mcbbbk.com/newsview166829.html

所属分类:萌宠日常
上一篇: 怎么邮寄宠物,有航空、铁路、客车
下一篇: 为宠物提供寄养服务,让涉疫群众暖

推荐分享