精华内容
下载资源
问答
  • 主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下
  • 废话不多说了,直接给大家贴代码了,具体代码如下所示:异步参数上传-->-->var $context = {};$context.ctx = '${ctx}';$context.resources = '${ctx}/resources';返回上传页面placeholder="请输入appkey">...

    废话不多说了,直接给大家贴代码了,具体代码如下所示:

    异步参数上传

    -->

    -->

    $context.ctx = '${ctx}';

    $context.resources = '${ctx}/resources';

    placeholder="请输入appkey">

    placeholder="请输入批次号">

    v-model.trim="batchInforRequestVO.currentPage">

    查询

    查询结果
    批次号处理进度文件名称上传时间请求方法操作
    {{batchInforResponseVO.batchNum}}{{batchInforResponseVO.processPercentage}}{{batchInforResponseVO.channelName}}{{batchInforResponseVO.inserTime}}{{batchInforResponseVO.requestAddre}}导出

    v-on:click="redirectTo(index)" id="opreat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >自定义导出

    展开全文
  • 写前端项目时vue表单验证突然变成异步了,导致如果获取校验函数的返回值,应该是升级iview组件导致的,这里记录一下改为同步的一种写法 实现功能:表单中进行规则设置,当触发提交或者流程中的下一页时触发这些规则...

    写前端项目时vue表单验证突然变成异步了,导致如果获取校验函数的返回值,应该是升级iview组件导致的,这里记录一下改为同步的一种写法

    实现功能:表单中进行规则设置,当触发提交或者流程中的下一页时触发这些规则校验

    表单

    <Form ref="businessInfo" :model="businessInfo" :rules="businessInfoRule" :label-width="120">
        <Row>
                                <Col span="8">
                                    <Col span="22">
                                        <FormItem label="业务信息:" prop="objectInfo">
                                            <!-- {{sendData.busnissMsg}} -->
                                            <Input v-model="businessInfo.objectInfo" placeholder="具体使用集群的业务名称"></Input>
                                        </FormItem>
                                    </Col>
                                </Col>
                                <Col span="8">
                                    <Col span="22">
                                        <FormItem label="OP:" prop="op">
                                            <Input v-model="businessInfo.op" placeholder="产品线OP"></Input>
                                        </FormItem>
                                    </Col>
                                </Col>
                                <Col span="8">
                                    <Col span="22">
                                        <FormItem label="项目邮件组:" prop="mailGroup">
                                            <Input v-model="businessInfo.mailGroup" placeholder="邮箱地址"></Input>
                                        </FormItem>
                                    </Col>
                                </Col>
        </Row>  
    </Form>
    

    规则在data中设置

    • 子key的名字和上述表单子项的prop设置的名字要一样
    businessInfoRule:{
                    op:[
                        {required:true,message: '请填写业务op',trigger: 'change'}
                    ],
                    mailGroup:[
                        {required:true,type:'email',message: '请正确填写邮箱信息',trigger: 'change'},
                    ],
                    note:[
                        {required:true,message: '请填写业务用途',trigger: 'change'},
                        {max:30,message: '请限制在30个字范围内',trigger: 'change'}
                    ],
                    objectInfo:[
                        {required:true,message: '请填写业务信息',trigger: 'change'},
                    ]
                },
    

    规则校验的函数以及调用函数

    • Promise是内置的函数
    • this.checkForm().then(res=> 这里的res是checkForm函数返回的结果集
      
    • 通过Promis和this.checkForm().then(res=>这种调用方法实现同步调用,即当checkForm执行完毕后才会进入下一逻辑
    checkForm(){
                return new Promise((resolve, reject) => {
                    this.$refs['businessInfo'].validate((valid) => {
                        console.log('inner')
                        console.log(valid)
                        if (valid) {
                            resolve(true)
                        } else {
                            this.$Message.error('请检查业务及归属信息');
                            checkResult = false
                            resolve(false)
                        }
                    })
                })
    },
    changeCrrentPage(){
        this.checkForm().then(res=>{
                            if (res){
                                console.log(res)
                                this.defaultPage = page;
                                this.$refs.flowApply.changePage(page)
                            }
                        })
        break  
    }
    

    错误的写法

    • 以前均是采用此中方法进行校验,但是升级了iview组件之后此方法不在生效,在调用checkForm函数时其变为了异步方式,即if(this.checkForm()) 这里的返回时undefined
    checkForm(){
                return new Promise((resolve, reject) => {
                    this.$refs['businessInfo'].validate((valid) => {
                        console.log('inner')
                        console.log(valid)
                        if (valid) {
                            return(true)
                        } else {
                            this.$Message.error('请检查业务及归属信息');
                            return false
                        }
                    })
                })
    },
    changeCrrentPage(){
        if (this.checkForm()) {
                            this.defaultPage = page;
                            this.$refs.flowApply.changePage(page)
                        }
        break  
    }
    
    展开全文
  • Vue form 表单提交+ajax异步请求+分页

    千次阅读 2017-04-21 17:59:58
    <!DOCTYPE html> ,initial-scale=1"> 异步参数上传 <lin
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta charset="UTF-8"/>
        <title>异步参数上传</title>
        <link rel="stylesheet" type="text/css" href="${ctx }/css/bootstrap.min.css">
        <#--<link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>-->
        <link href="${ctx }/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/css" href="${ctx }/css/css.css"/>
        <#--<link rel="stylesheet" type="text/css" href="${ctx }/css/style.css"/>-->
        <link rel="stylesheet" type="text/css" href="${ctx }/css/subwelcome.css"/>
        <script>var $context = {};
        $context.ctx = '${ctx}';
        $context.resources = '${ctx}/resources';
        </script>
    </head>
    <body>
    <div id="app" class="htmleaf-container">
    
        <div class="container kv-main">
            <br>
            <div style="margin-left: 200px;" class="robot-b-name">
                <a class=".btn btn-primary" href="">返回上传页面</a>
            </div>
            <br>
            <form @submit.prevent="submit" class="well form-inline">
                <input type="text" class="input-big" style="width: 500px" v-model.trim="batchInforRequestVO.appkey"
                       placeholder="请输入appkey">
                <input type="text" class="input-group" style="width: 500px" v-model.trim="batchInforRequestVO.batchnum"
                       placeholder="请输入批次号">
                <input type="hidden" class="input-group" style="width: 500px"
                       v-model.trim="batchInforRequestVO.currentPage">
                <button type="submit" class="btn btn-info">查询</button>
            </form>
            <br>
            <!--提示框公共部分begining-->
            <div class="modal-mask" v-show="show">
                <div class="modal-confirm">
                    <h4 class="confirm-header">
                        <i class="iconfont icon-questioncircle"></i> {{ title }}
                    </h4>
                    <div class="confirm-content">
                        {{ content }}
                    </div>
                    <div class="confirm-btns">
                    <#--<button class="btn" v-on:click="opt(1)">取 消</button>-->
                        <button class="btn btn-primary" v-on:click="opt(2)">确 定</button>
                    </div>
                </div>
            </div>
            <br>
            <!--提示框公共部分ending-->
            <div class="modal-mask" v-show="showcontent">
                <div class="modal-confirm">
                    <h4 class="confirm-header">
                        <i class="iconfont icon-questioncircle"></i> {{ title }}
                    </h4>
                    <div class="confirm-content">
                        {{ content }}
                    </div>
                    <div class="confirm-btns">
                    <#--<button class="btn" v-on:click="opt(1)">取 消</button>-->
                        <button class="btn btn-primary" v-on:click="opt(3)">确 定</button>
                    </div>
                </div>
            </div>
            <div>查询结果</div>
            <!-- TableBegining -->
            <div>
                <table class="table table-striped table-bordered table-condensed">
                    <tr>
                        <th>批次号</th>
                        <th>处理进度</th>
                        <th>文件名称</th>
                        <th>上传时间</th>
                        <th>请求方法</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(batchInforResponseVO, index) in BatchInforResponseVO ">
                        <td>{{batchInforResponseVO.batchNum}}</td>
                        <td>{{batchInforResponseVO.processPercentage}}</td>
                        <td>{{batchInforResponseVO.channelName}}</td>
                        <td>{{batchInforResponseVO.inserTime}}</td>
                        <td>{{batchInforResponseVO.requestAddre}}</td>
                        <td><a id="opreat" v-on:click="defaultExport(index)" href="#">导出 </a><a
                                v-on:click="redirectTo(index)" id="opreat" href="#">自定义导出 </a></td>
                    </tr>
                </table>
            </div>
            <!-- TableEnding -->
            <!-- 分页部分Begining -->
    
            <div class="span6" style="width:25%;margin-right: 10px;float: right;">
                <div style="width: 500px;" id="DataTables_Table_0_length">
                    <span> 每页10条记录 当前页{{batchInforRequestVO.currentPage}}</span> &nbsp
                    <span>{{totalPage}}页&nbsp<a id="previousPage" v-on:click="changePage(1)" href="#">←上一页</a>&nbsp &nbsp<a
                            id="nextPage" v-on:click="changePage(2)" href="#">下一页 →</a></span>
                </div>
            </div>
            <!-- 分页部分Ending -->
    
        </div>
    </div>
    </div>
    </body>
    <script type="text/javascript">
        window.history.go(1);
    </script>
    <script src="${ctx }/js/jquery/jquery-2.0.3.min.js"></script>
    <script src="${ctx }/js/jquery.form.js"></script>
    <script src="${ctx }/js/vue/vue.js"></script>
    <script src="${ctx }/js/business/exportconfig.js" type="text/javascript"></script>
    
    </html>
    var vue = new Vue({
        el: '#app',
        data: {
            batchInforRequestVO: {
                currentPage: 1,
                appkey: '',
                batchnum: ''
            },
            show: false,
            showcontent: false,
            onCancel: false,
            onOk: false,
            totalPage: 0,
            title: '提示框',
            content: '加载......',
            message: '批量数据处理',
            BatchInforResponseVO: []
    
        },
        methods: {
            refreshTest: function () {
                location.reload(true)
            },
    
            //输入框增加方法
            add: function () {
                this.user.names.push({
                    text: ""
                })
            },
    
            //输入框删除方法
            decrease: function (index) {
                if (!index == 0) {
                    this.user.names.splice(index, 1)
    
                }
    
            },
            changePage: function (type) {
                if (type == '1') {
                    debugger
                    if (this.batchInforRequestVO.currentPage == '1') {
                        vue.showcontent = true;
                        vue.content = '已经是首页啦!';
                        return
                    }
                    this.batchInforRequestVO.currentPage--;
                    this.submit();
                }
                else if (type == '2') {
                    this.batchInforRequestVO.currentPage++;
                    debugger
                    if (this.batchInforRequestVO.currentPage > this.totalPage) {
                        this.batchInforRequestVO.currentPage--;
                        vue.showcontent = true;
                        vue.content = '已经是尾页啦!';
                        return
                    }
                    this.submit();
    
                }
    
            },
            checkparam: function () {
    
                if (this.batchInforRequestVO.appkey == '' && this.batchInforRequestVO.batchnum == '') {
                    vue.showcontent = true;
                    vue.content = '查询参数不可以为空!';
                    return false
                }
                else {
                    return true
                }
    
    
            },
            opt(type){
    
                this.show = false
                if (type == '1') {
                    if (this.onCancel) this.onCancel()
                }
                else if (type == '3') {
                    this.showcontent = false
                    if (this.onOk) this.onOk()
                }
                else {
                    if (this.onOk) this.onOk()
                    vue.refreshTest();
                }
    
                this.onCancel = false
                this.onOk = false
    
                document.body.style.overflow = ''
            },
    
            submit: function () {
                debugger
                var data = JSON.stringify(this.batchInforRequestVO); // 这里才是你的表单数据
    
                if (!vue.checkparam()) {
                    return
                }
                ;
                //da.append("name", this.name)可以逐次添加多个参数
                $.ajax({
                    url: '../interface/queryBatchInfor',
                    data: data,
                    type: 'POST',
                    contentType: 'application/json',
                    dataType: 'JSON',
                    // cache: false,
                    processData: false,// 告诉jQuery不要去处理发送的数据
                    // contentType: false,// 告诉jQuery不要去设置Content-Type请求头
    
                    success: function (data) {
                        debugger
                        if (data.respCode == 'success') {
                            vue.BatchInforResponseVO = data.batchInforResponseVOList;
                            vue.totalPage = data.totalPage;
                        } else {
                            vue.show = true;
                            vue.content = data.respMsg;
                        }
                        console.log(data)
                    },
                    error: function (data) {
                        vue.show = true;
                        vue.content = '系统内部错误';
                    }
                })
    
    
            },
            defaultExport: function ($index) {
                debugger
                var index = $index;
    
                window.location.href = $context.ctx + "../interface/defaultexcport?batchNum=" + this.BatchInforResponseVO[index].batchNum;
            },
            redirectTo: function ($index) {
                vue.showcontent = true;
                vue.content = '进行中......';
                debugger
                var index = $index;
                // window.location.href = $context.ctx + "../interface/to_autoconfig?batchNum="+ this.BatchInforResponseVO[index].batchNum;
            }
    
    
        }
    
    })
    
    
    
    
    展开全文
  • 废话不多说了,直接给大家贴代码了,具体代码如下所示:异步参数上传-->-->var $context = {};$context.ctx = '${ctx}';$context.resources = '${ctx}/resources';返回上传页面placeholder="请输入appkey">...

    废话不多说了,直接给大家贴代码了,具体代码如下所示:

    异步参数上传

    -->

    -->

    $context.ctx = '${ctx}';

    $context.resources = '${ctx}/resources';

    placeholder="请输入appkey">

    placeholder="请输入批次号">

    v-model.trim="batchInforRequestVO.currentPage">

    查询

    查询结果
    批次号处理进度文件名称上传时间请求方法操作
    {{batchInforResponseVO.batchNum}}{{batchInforResponseVO.processPercentage}}{{batchInforResponseVO.channelName}}{{batchInforResponseVO.inserTime}}{{batchInforResponseVO.requestAddre}}导出

    v-on:click="redirectTo(index)" id="opreat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >自定义导出

    展开全文
  • &lt;form @submit.prevent="submit($event)"&gt; &lt;input type="text" class="form-control" placeholder="请输入姓名" name="cuserName"...
  • // 保存按钮事件, 校验form表单是否合法 return new Promise((resolve, reject) => { _this.$refs[name].validate(res => { if (!res) { _this.$Message.error('请根据提示信息补全提交的内容信息') } ...
  • axios用post异步形式提交的数据和我们直接使用from表单提交的数据的格式(Form Data格式)是不一样的,在下面列举 默认格式Request Payload 直接使用axios发送异步请求,没任何处理的代码如下: const service = axios....
  • 踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的...axios用post异步形式提交的数据和我们直接使用from表单提交的数据的格式(Fo...
  • Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】目 录1、Vue表单原生JS实现异步表单提交运行截图代码核心指令单选框、密码框、多行文本框单选多选勾选下拉列表(每个option标签都要有value值)组件...
  • vue中通过post方式异步上传文件

    万次阅读 2018-03-13 11:16:20
    功能需求:根据后台接口需求,需通过异步的方式post提交上传文件,并根据返回的信息作出相应的提示。页面已提前写好了,如下:思路分析:1、创建一个FormData空对象,然后使用append方法添加key/value。选择formData...
  • 原生JS实现异步表单提交 运行截图 代码 核心指令 单选框、密码框、多行文本框 单选 多选 勾选 下拉列表(每个option标签都要有value值) 组件汇总案例 运行截图 代码 ToDoList案例 JS堆栈内存图 运行截图 代码 2、...
  • 如下图所示,左侧为菜单,点击设置当前表单展示的数据,右侧表单展示左侧的表单数据,即arr[k] = formData,在提交表单时,需要逐个校验arr[k]的必填项,校验通过则可提交,不通过则将表单停留在当前不通过的表单上...
  • 做项目时遇到上传excel文件到后台,项目使用的是elementUI组件,直接使用element的Upload上传,但是需求是需要用户选择完文件,并且输入文件描述,然后一起上传到后台,类似于form表单提交   (1).vue html  ...
  • Ajax的产生主要是因为在没有异步请求的时候,网络使用的都是同步请求,设想一下你在填写银行办卡的业务表单,花费了十几分钟好不容易写完了发送同步请求到服务器提交表单,但因为同步请求的特性,在上传以及服务器...
  • 在开发的过程中 有时根据业务需求提交表单内容分区分块 内容繁多 业务控制相对复杂的时候 我们应该将页面内容分成若干个组件 这样方便后期维护查找问题 不然时间长了后期维护找问题头都大了 如上图所示 页面表单...
  • 发布时间:2019-01-07 整理:编程之家...动态渲染就是有一个异步的数据,大概长这样:然后你需要把这个json渲染成这样:最后提交表单的数据长这样:然后我们目标就是封装这样一个组件:实现开始之前,你需要知道 ...
  • axios实现表单的验证提交 1、Demo描述: 1)登录: 检查学生号,密码是否为空。 思路:用vue的v-model实现数据的双向绑定 检查该用户是否存在。 思路: 用axios.get来实现异步查 2)注册: 检查学生号,...
  • vue-ajax

    2019-08-22 00:05:38
    1.异步提交Ajax的方式把数据提交到后台,得阻止表单默认提交行为 2.收集表单中的数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <...
  • 页面异步发出get请求获取数据,提交表单异步post数据到服务端 客户端 客户端代码 代码解析: // 服务端请求地址 let url = 'http://local.php.com/index.php'; let vm = new Vue({ el: "#app", data: { list: ...
  • (ps:说白了就是不使用form表单实现form表单提交数据或文件,如果还是不懂,请自行百度) 实现过程 1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式) 2.修改input框的默认样式 3...
  • 在使用axios时,注意到配置选项中包含params和data...vue开发推荐使用axios进行ajax异步请求,然而使用axios进行post表单提交时默认使用的Content-Type“为application/json” 而大多数的web服务器只能识别post请...
  • 问题描述:最近在使用vue全家桶开发前端,后端框架是django,我在使用axios做前端异步请求时,除了get之外的请求方法django都会返回403状态码,表单总是提交不上去。分析原因:通过chrome浏览器的network中,了解到...
  • START 仅以此文,纪念这个离谱的bug,o(╥﹏╥)o 问题 长话短说,使用axios进行请求,浏览器f12检查,请求成功。但是代码逻辑还是进入axios的catch模块。...例如 form表单,点击按钮提交后,表单会刷新 特殊情况
  • 问题:axios返回200状态码(即...例如 form表单,点击按钮提交后,表单会刷新 补充知识:axios用catch的写法与不使用catch有什么区别? 官网上的写法: axios.post(url, data) .then(response => { console.log(res

空空如也

空空如也

1 2
收藏数 38
精华内容 15
关键字:

vue表单提交异步

vue 订阅