vue 表单提交
Posted summer0319
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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();
以上是关于vue 表单提交的主要内容,如果未能解决你的问题,请参考以下文章