Vue form 表单提交+ajax异步请求+分页效果
更新时间:2017年4月27日 10:00 点击:1424
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!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异步请求+分页效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16