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

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

查询

{{ title }}

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

{{ title }}

{{ content }} <#--取 消--> 确 定 查询结果 每页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异步请求+分页效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程 主题: jQuery、数据、UT、谢大、数据处理、删除、