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

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

 
 
 
 
 
 <#---->
 
 
 <#---->
 
 



 
  

  
   返回上传页面
  
  

  
  

  
  
   
    

      {{ title }}
    
    
     {{ content }}
    
    
    <#--取 消-->
     确 定
    
   
  
  

  
  
   
    

      {{ title }}
    
    
     {{ content }}
    
    
    <#--取 消-->
     确 定
    
   
  
  查询结果
  
  
   

    

     
批次号
     
处理进度
     
文件名称
     
上传时间
     
请求方法
     
操作
    
    

     
{{batchInforResponseVO.batchNum}}
     
{{batchInforResponseVO.processPercentage}}
     
{{batchInforResponseVO.channelName}}
     
{{batchInforResponseVO.inserTime}}
     
{{batchInforResponseVO.requestAddre}}
     
导出 自定义导出 
    
   
  
  
  
  
   
     每页10条记录 当前页{{batchInforRequestVO.currentPage}}  
    共{{totalPage}}页 ←上一页   下一页 →
   
  
  
 

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异步请求+分页效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！