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

 更新时间:2017年04月22日 08:43:38   作者:liuyinhe110808  
这篇文章主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下

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

<!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> &nbsp
    <span>共{{totalPage}}页&nbsp<a id="previousPage" v-on:click="changePage(1)" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >←上一页</a>&nbsp &nbsp<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异步请求+分页效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 详解ElementUI之表单验证、数据绑定、路由跳转

    详解ElementUI之表单验证、数据绑定、路由跳转

    本篇文章主要介绍了ElementUI之表单验证、数据绑定、路由跳转,非常具有实用价值,需要的朋友可以参考下
    2017-06-06
  • vue进行post和get请求实例讲解

    vue进行post和get请求实例讲解

    这篇文章主要介绍了vue进行post和get请求实例讲解,违章围绕post和get请求的相关资料展开详细内容,具有一的的参考价值,需要的小伙伴可以参考一下
    2022-03-03
  • 教你使用vue-cli快速构建的小说阅读器

    教你使用vue-cli快速构建的小说阅读器

    这篇文章主要介绍了vue-cli构建的小说阅读器,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vue页面加载时的进度条功能(实例代码)

    vue页面加载时的进度条功能(实例代码)

    这篇文章主要介绍了vue页面加载时的进度条功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • uniapp开发打包成H5部署到服务器的详细步骤

    uniapp开发打包成H5部署到服务器的详细步骤

    前端使用uniapp开发项目完成后,需要将页面打包,生成H5的静态文件,部署在服务器上这样通过服务器链接地址,直接可以在手机上点开来访问,下面小编给大家讲解uniapp开发打包成H5部署到服务器的步骤,感兴趣的朋友一起看看吧
    2022-11-11
  • Vue.js如何使用Socket.IO的示例代码

    Vue.js如何使用Socket.IO的示例代码

    这篇文章主要介绍了Vue.js如何使用Socket.IO的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Vue3封装hooks实现实时获取麦克风音量

    Vue3封装hooks实现实时获取麦克风音量

    这篇文章主要为大家详细介绍了Vue3如何通过封装一个hooks实现实时获取麦克风音量功能,文中的示例代码讲解详细,需要的小伙伴可以参考一下
    2024-03-03
  • vue实现导航菜单和编辑文本的示例代码

    vue实现导航菜单和编辑文本的示例代码

    这篇文章主要介绍了vue实现导航菜单和编辑文本功能的方法,文中示例代码非常详细,帮助大家更好的参考和学习,感兴趣的朋友可以了解下
    2020-07-07
  • vue子组件获取到它父组件数据的4种方法

    vue子组件获取到它父组件数据的4种方法

    这篇文章主要给大家介绍了关于vue子组件获取到它父组件数据的4种方法,对于vue来说组件之间的消息传递是非常重要的,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • vue-cli3环境变量与分环境打包的方法示例

    vue-cli3环境变量与分环境打包的方法示例

    这篇文章主要介绍了vue-cli3环境变量与分环境打包的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论