码迷,mamicode.com
首页 > 其他好文 > 详细

vue 表单提交

时间:2017-06-22 18:36:45      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:标识   fail   ble   sda   for   add   tty   close   ajax   

 在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();

 

vue 表单提交

标签:标识   fail   ble   sda   for   add   tty   close   ajax   

原文地址:http://www.cnblogs.com/summer0319/p/7066239.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!