Vue 提交表单[通俗易懂]

Vue 提交表单[通俗易懂]1、form标签@submit.prevent=”submit($event)”<form@submit.prevent=”submit($event)”><inputtype=”text”class=”form-control”placeholder=”请输入姓名”name=”username”><inputtype=”s…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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
        });
    }
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184943.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 做c_keonhacai truc tiep bong da

    做c_keonhacai truc tiep bong daGym – 101962K _ Rei do Cangaço

  • pycharm突然打不开到底什么情况_pycharm运行没反应

    pycharm突然打不开到底什么情况_pycharm运行没反应当无法打开pycharm终端,出现以下情况1、打开pycharm设置2、打开一下界面3、在shell路径中选择windows下的cmd.exe,这样就可以将cmd命令路径连接到pycharm中,无法打开windows终端即可方便下载安装包4、重新启动pycharm…

  • ubuntu系统下mysql重置密码和修改密码操作

    ubuntu系统下mysql重置密码和修改密码操作一、忘记密码后想重置密码在介绍修改密码之前,先介绍一个文件/etc/mysql/debian.cnf.其主要内容如下图:里面有一个debian-sys-maint用户,这个用户只有Debian或Ubuntu服务器才有,所以如果您的服务器是Debain或Ubuntu,debian-sys-maint是个Mysql安装之后自带的用户,具体作用是重启及运行mysql服务。所以如果忘了root密码,可以通…

  • centos7.6安装docker_docker 生产环境

    centos7.6安装docker_docker 生产环境前言前面一篇学了mac安装docker,这篇来学习在linux上安装docker环境准备Docker支持以下的CentOS版本,目前,CentOS仅发行版本中的内核支持Docker。Doc

  • vs2021安装教程_vs2015企业版安装教程

    vs2021安装教程_vs2015企业版安装教程一、学习C/C++语言用什么环境?DevC++很久不在更新,对于C语言的标准支持不够好vc6.0太古老,98年的软件了二、那小编推荐什么大家用什么软件?VS2013及以上版本都行!今天跟大家唠如何安装VS2022(听说VS官网更新了,小伙伴们找不到VS2019了)三、VS2019下载官网VS2022官网https://visualstudio.microsoft.com/zh-hans/?rr=https://www.microsoft.com/zh-cn/3.1点击VS

  • vscode快捷键与使用配置[通俗易懂]

    vscode快捷键与使用配置[通俗易懂]简化记忆F1F11Ctrl+P?!:@#Ctrl+NCtrl+Shift+NCtrl+Shift+WCtrl+TabCtrl+\Ctrl+[、Ctrl+]Shift+Alt+F,或Ctrl+Shift+P后输入formatcodeAlt+Up或Alt+Down选中按TAB右移,按SHIFT+TAB左移Ctrl+F主命令框F1或Ctrl+Shift+P:打开命令面板。在打开的输入框内,可以输入任何命令,例如:按一下Backspace会

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号