vue 表单提交

在vue中,有一个$el 属性。

该属性在created 的阶段还是不可用的,直到 mounted 之后,我们才能获取到 $el 属性。

$el是vue实例中 el 属性标识的dom元素。

————————————————————————————————————

vue表单提交,有时候需要提交 文件数据,这时候需要用到 formDate,代码如下

 1             let formData = new FormData($(this.$el).find(".import-form")[0]);     // .import-form 是需要提交的表单
 2                     let config = { processData : false, contentType : false, disableDefaultAlert: true};
 3
 4                     App.ajax(batchImport, ‘post‘, formData, config).done(ret=>{
 5                         App.showAlert({type:"success",
 6                             content:"上传成功!",
 7                             title:"提示"});  8 9                         this.render();  // 数据提交成功之后,重新调用渲染页面的方法更新页面数据。
10                     }).fail(msg=>{
11                         App.showAlert({type:"error",
12                             content:msg,
13                             title:"导入失败!"});
14                         close();
15                     })

还有一种提交方式,没有文本,只需要提交表单数据的方法。

serialize()  方法可以序列化表单数据。

 1         loadData(formEle){
 2                 let formData = $(formEle).serialize();
 3                 App.showLoading();
 4                 App.ajax(ActivityList, ‘get‘, formData).done(ret=>{
 5                     this.dataList = ret.data;
 6                     this.list = ret.data.activityList || [];
 7                     if(ret.data.activityList==null){
 8                         App.showAlert({type:"info",
 9                                        content:"该查询条件下没有查询到数据",
10                                        title:"提示"});
11                     }
12                     this.pagination.total = ret.data.pageCount;
13                 })
14                 .always(()=>{
15                     App.hideLoading();
16                 });
17             },

或者也可以通过$el 属性获取表单,进行序列化

                let formData = $(this.$el).find(‘.js-query-form‘).serialize();
时间: 2024-10-27 02:51:48

vue 表单提交的相关文章

vue的表单提交

vue的表单提交需要基于vue-resource <template> <div class="hello"> <form @submit.prevent="submit"> <div> 姓名:<input type="text" v-model="user.name"> </div> <div> 性別: <label> <i

Iview 表单提交: Cannot read property &#39;validate&#39; of undefined

提交表单时,提示报这个错,找了半天,然后也百度了很久,一直没找到答案,代码如下: <link href="~/lib/iview3.1.4/styles/iview.css" rel="stylesheet" /> <link href="~/css/login.css" rel="stylesheet" /> <link href="~/lib/iview3.1.4/styles/iv

表单提交数据格式form data

前言: 最近遇到的最多的问题就是表单提交数据格式问题了. 常见的三种表单提交数据格式,分别举例说明:(项目是vue的框架) 1.application/x-www-form-urlencoded 提交表单方法,js代码如下: submitForm() { let data = 'title="标题"&content="内容"&pic[]="image1"&pic[]="image2"&pic[]

vue 表单校验(二)

vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐,因而一直在研究中 表单校验分类 前后端校验 前端校验 后端校验 这种目前一般是结合起来使用,很少单纯前端校验,或者单纯后端校验的 前端检验 数据录入时校验 数据回显时校验 动态创建时校验 数据是否必填时校验 接下来所谈论的校验都是基于前端进行校验,若是后天校验,只是统一校验规则而已,这样前后便可以统

vue表单校验(三)

vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 通过表单提交时,触发校验,未通过的表单会添加is-error,之后滚动到对应的错误位置即可 页面视图 实现逻辑 触发条件 在提交时,若是未通过则开始进行判断,由于是依赖于is-error的class类名,因而需要等form表单错误的元素添加完is-error类名后再进行判断 submitForm1

Ajax表单提交

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields() 和 resetForm()等.

struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($("#textValue").val() == "") {3                 $("#errortip").html("<font color='#FF0000'>请输入查询内容</font>")

表单提交时如何将错误信息传递到页面中,并且保存原来提交数据

曾经何时,你还有我或许都在困惑,如何方便的将验证不通过的表单信息再返回到前台页面,例如我注册一个账号,辛辛苦苦填写了N多项,一个格式验证没有通过,一切都需要充填,虽然Ajax可以解决这个问题,但是我们总不能把所有表单提交都弄成ajax,更何况有若干人就是没事把javascript给禁止了.哎哎,好了解决方案来了,下面以用户登录为例,说说我的解决方案. 服务器端用nodejs实现: login.html 简单的提交表单 <form action="" id="loginF

关于表单提交的书写

注意form表单提交的action属性写地址的时候,开头不要用"/",因为如果写上"/"的话,系统就会在WEB-INF/views中寻找这个jsp文件的 未完待续...