Vue form 表单提交+ajax异步请求+分页效果
更新时间：2017年4月27日 10:00 点击：1393
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!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-28
- 这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2020-11-13
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-20
- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23
- 这篇文章主要为大家详细介绍了vue实现div单选多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-07-16
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了vue接口请求加密实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 这篇文章主要介绍了Vue中的插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-10-19