zoukankan      html  css  js  c++  java
  • 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();
  • 相关阅读:
    Java是如何实现平台无关性的
    Java 语法糖详解
    深入分析Java的编译原理
    Java代码的编译与反编译那些事儿
    Java 源码学习系列(三)——Integer
    总结TESTNG与JUNIT的异同
    selenium如何操作cookies实现免登录
    selenium选择弹出窗口
    Selenium+Java(七)Selenium对话框的处理
    Java-控制台接受用户输入数据的方法
  • 原文地址:https://www.cnblogs.com/summer0319/p/7066239.html
Copyright © 2011-2022 走看看