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


Posted in Javascript onApril 22, 2017

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

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

Javascript 相关文章推荐
JS链式调用的实现方法
Mar 07 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
Vue制作Todo List网页
Apr 26 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
Paypal支付不完全指北
Jun 04 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 #Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 #Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 #Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 #jQuery
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 #Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 #Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 #Javascript
You might like
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
yii数据库的查询方法
2015/12/28 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
python机器学习实战之树回归详解
2017/12/20 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python如何将两个txt文件内容合并
2019/10/18 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
logging level级别介绍
2020/02/21 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
巴西购物网站:Submarino
2020/01/19 全球购物
《七颗钻石》教学反思
2014/02/28 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
小学语文复习计划
2015/01/19 职场文书
2016年元旦致辞
2015/08/01 职场文书
辅导员学期工作总结
2015/08/14 职场文书