博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue 表单提交
阅读量:6190 次
发布时间:2019-06-21

本文共 1913 字,大约阅读时间需要 6 分钟。

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

 

转载于:https://www.cnblogs.com/summer0319/p/7066239.html

你可能感兴趣的文章
将大文件分割为指定大小的文件
查看>>
SET FOREIGN_KEY_CHECKS = 0
查看>>
《Javascript秘密花园》学习笔记(下)
查看>>
[20190524]DISABLE TABLE LOCK(12c).txt
查看>>
linux命令行翻页
查看>>
git 学习笔记
查看>>
python 序列化之JSON和pickle详解
查看>>
Webstorm配置svn【window系统】
查看>>
Android应用神器:高级终端Termux
查看>>
无边框窗体移动
查看>>
.Hbase批量导入数据应用
查看>>
sql openxml sp_xml_preparedocument xml 中文乱码
查看>>
帧中继的配置
查看>>
前端资源收藏
查看>>
json-lib解析json之二维JSONArray
查看>>
校验软件包
查看>>
1084 Broken Keyboard
查看>>
CentOS6.8单用户模式下修改密码
查看>>
优雅的实现微信分享/支付,组件化
查看>>
八、Android性能优化之电量优化(二)
查看>>