使用axios向java后台传数据

1 篇文章 0 订阅
1 篇文章 0 订阅

使用axios向java后台传数据

1.问题的产生

以前老夫写代码都是用jquery,各种 . g e t ( ) , .get(), .get(),.post(),$.ajax()用的贼6,然而这次项目组决定用vue来做前端。好吧,尤大大的大名早已耳闻,这次就看看vue是个什么鬼。

<html>
	<header>
	  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</header>
	<body>
		<el-form ref="form" :model="form" label-width="80px" >
		  	<el-form-item label="活动名称">
		  		<el-input v-model="form.name"></el-input>
		  	</el-form-item>
		  	<el-form-item >
		  		<el-button type="primary" @click="onSubmit('form')">创建</el-button>
		  		<el-button>取消</el-button>
		  	</el-form-item>
		  </el-form>
	</body>
</html>

一通组件操作操作猛如虎,回头一看,emm…貌似不难嘛,表单已做好,就差提交了。可这怎么提交?????总不能继续用jquery吧,这样原地踏步可不行。

2.axios异步请求

用axios当然要引入axios.js
这里我还用了vue.js和elementui的js,都一起引入了

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src = "https://unpkg.com/axios/dist/axios.min.js" > </script> 

组件是必不可少的:

<script type="text/javascript">
	var app19 = {
		data(){
			return {
				form:{
					name:''
				}
			}
		},
		methods:{
			onSubmit(e){
				axios.post("flightPlan/test",{name:this.form.name},{headers:
						{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
					})
				 .then((response)=>{console.log(response)})
				 .catch((err)=>{console.log(err)});
			}
		}
	}
	var Ctor19 = Vue.extend(app19);
	new Ctor19().$mount("#app19");
</script>

按理说这时候点击应该会向后端发起一个请求,写个Controller接收试试:

@RestController
@RequestMapping("/flightPlan")//这里的路径请改为自己的路径
public class FlightPlanController  {

    @PostMapping(value = "/test")
    public String test(String name){
        System.out.println(name);
        return "the name is "+name;
    }
}

打个断点调试看看:
在这里插入图片描述
可以访问controller但是那么的值居然没有收到,好奇怪,难道前端没有发过来?赶紧网页检查:
在这里插入图片描述
Form data里已经传了值,可这个值怎么怪怪的说。这对花括号?这是个json数据吧,这东西后端能收??

3.qs.js

用qs的stringify方法把数据转成后端能收得格式,先引入个qs.js

<script src="//cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>

看来onSubmit方法需要修改一下:

methods:{
			onSubmit(model){
				//转换一下,提交转换后的对象
				let dt = Qs.stringify({name:this.form.name});
				axios.post("flightPlan/test",dt,{headers:
						{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
					})
				 .then((response)=>{console.log(response)})
				 .catch((err)=>{console.log(err)});
			}
		}

再提交一次表单,看看formdata里面的数据
在这里插入图片描述
果然花括号不见了,提交的数据和以前用ajax的时候一种造型,好亲切啊 !
后端该收到了吧
在这里插入图片描述
完事儿。

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值