Vue 提交表单
Vue 提交 表单
2023-06-13 09:14:48 时间
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.cn/184943.html原文链接:https://javaforall.cn
相关文章
- Vue专题 05_详解vue生命周期的每个节点
- Vue(3)webstorm代码格式规范设置与vue模板配置
- vue中通过路由跳转的三种方式
- 请简述什么是Vue组件化开发_vue组件化开发
- 闲聊vue版本差异和开发中不太容易注意的点(基础篇)
- vue 最简易的邮箱正则表达式[通俗易懂]
- Vue响应式依赖收集原理分析-vue高级必备
- vue formdata请求_vue修改数据没有渲染到页面的原因
- vue封装组件方法_什么是vue组件
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- vue分页轮播_jquery分页插件
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- VUE系列 --- 网络模块axios(三)
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- springboot和vue交互产生跨域问题的解决办法(后端解决方法)
- 2. 「vue@2.6.11 源码分析」数据驱动视图(响应式)
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- Vue CLI
- Vue表单输入绑定
- 解决前后端分离Vue项目部署到服务器后出现的302重定向问题
- Vue提示框组件vue-notification使用实例演示
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- 基于Vue的Redis网页设计(vue设计redis页面)
- Vue用Redis储存获取数据(vue获取redis)
- Vue实时监测Redis变化(vue监控redis变化)
- Vue如何连接Redis数据库(vue怎么连接Redis)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue搭配Redis做针对性取值(vue redis取值)