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

更新时间：2020-05-07 14:36:02 作者：startmvc

废话不多说了，直接给大家贴代码了，具体代码如下所示：<!DOCTYPEhtml><htmllang="en">&

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


<!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" rel="external nofollow" >
 <#--<link href="css/fileinput.css" rel="external nofollow" media="all" rel="stylesheet" type="text/css"/>-->
 <link href="${ctx }/css/fileinput.css" rel="external nofollow" media="all" rel="stylesheet" type="text/css"/>
 <link rel="stylesheet" type="text/css" href="${ctx }/css/css.css" rel="external nofollow" />
 <#--<link rel="stylesheet" type="text/css" href="${ctx }/css/style.css" rel="external nofollow" />-->
 <link rel="stylesheet" type="text/css" href="${ctx }/css/subwelcome.css" rel="external nofollow" />
 <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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导出 </a><a
 v-on:click="redirectTo(index)" id="opreat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >自定义导出 </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>  
 <span>共{{totalPage}}页 <a id="previousPage" v-on:click="changePage(1)" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >←上一页</a>   <a
 id="nextPage" v-on:click="changePage(2)" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页 →</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;
 }
 }
})

以上所述是小编给大家介绍的Vue form 表单提交+ajax异步请求+分页效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！