Vue form 表单提交+ajax异步请求+分页

来源：互联网发布：java爬虫验证码编辑：程序博客网时间：2024/05/17 01:15

<!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;        }    }})

0 0