大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
1、form标签 @submit.prevent=”submit($event)”
<form @submit.prevent="submit($event)">
<input type="text" class="form-control" placeholder="请输入姓名" name="username">
<input type="submit" value="登陆" class="login" />
</form>methods:{
submit: function(event) {
var formData = new FormData(event.target);
//vue-resource
this.$http.post('/api', formData).then(res => {
// success callback
}, err => {
// error callback
});
//axios
axios.post('/user', formData).then(res => {
// success callback
}).catch(err => {
// error callback
});
}
}2、formData.append()
设置参数格式
-
application/json
axios默认提交格式；传递到后台的将是序列化后的json字符串，格式为JSON格式
格式：{“name”: “sun”}
-
multipart/form-data
用表单上传文件时，必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data
格式：Contnet-Disposition: form-data; name=sun
不同字段以--boundary开始，接着是内容描述信息，最后是字段具体内容。
如果传输的是文件，还要包含文件名和文件类型信息
-
text/XML
-
application/x-www-form-urlencoded
表单默认提交方式；传递到后台的将是key-value的形式
格式：name: sun
<form>
<input type="text" value="" v-model="name" placeholder="请输入用户名">
<input type="text" value="" v-model="age" placeholder="请输入年龄">
<input type="file" @change="getFile($event)">
<button @click="submitForm($event)">提交</button>
</form>methods:{
submit: function(event) {
event.preventDefault();
let formData = new FormData();
//下面是表单绑定的data 数据
formData.append('name', this.name);
formData.append('age', this.age);
formData.append('file', this.file);
//vue-resource
this.$http.post('/api', formData).then(res => {
// success callback
}, err => {
// error callback
});
//axios
//根据后台接收参数格式进行修改
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
axios.post('/api',formData, config).then(res => {
// success callback
}).catch(err => {
// error callback
});
}
}版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/184943.html原文链接：https://javaforall.net
