使用axios向java后台传数据

使用axios向java后台传数据1.问题的产生以前老夫写代码都是用jquery，各种.get(),.get(),.get(),.post(),$.ajax()用的贼6，然而这次项目组决定用vue来做前端。好吧，尤大大的大名早已耳闻，这次就看看vue是个什么鬼。一通组件操作操作猛如虎，回头一看，emm…貌似不难嘛，表单已做好，就差提交了。可这怎么提交？？？？？总不能继续用jquery吧，这样原..

苦哈哈的小杨

5776人浏览 · 2019-05-06 09:56:54

苦哈哈的小杨 · 2019-05-06 09:56:54 发布

使用axios向java后台传数据

1.问题的产生

以前老夫写代码都是用jquery，各种 $. g e t (),$ .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的时候一种造型，好亲切啊！
后端该收到了吧

完事儿。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^