微客导航 » 文章资讯 » Vue form 表单提交+ajax异步请求+分页效果

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

2024-02-25 06:48:03 305

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







异步参数上传

<#---->


<#---->









返回上传页面

查询

<#--取消--> 确定

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

查询结果

批次号处理进度文件名称上传时间请求方法操作 {{batchInforResponseVO.batchNum}} {{batchInforResponseVO.processPercentage}} {{batchInforResponseVO.channelName}} {{batchInforResponseVO.inserTime}} {{batchInforResponseVO.requestAddre}} 导出自定义导出

每页10条记录当前页{{batchInforRequestVO.currentPage}} 共{{totalPage}}页 ←上一页下一页→ window.history.go(1);

varvue=newVue({
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();
}
elseif(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='查询参数不可以为空!';
returnfalse
}
else{
returntrue
}
},
opt(type){
this.show=false
if(type=='1'){
if(this.onCancel)this.onCancel()
}
elseif(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
vardata=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
varindex=$index;
window.location.href=$context.ctx+"../interface/defaultexcport?batchNum="+this.BatchInforResponseVO[index].batchNum;
},
redirectTo:function($index){
vue.showcontent=true;
vue.content='进行中......';
debugger
varindex=$index;
//window.location.href=$context.ctx+"../interface/to_autoconfig?batchNum="+this.BatchInforResponseVO[index].batchNum;
}
}
})

以上所述是小编给大家介绍的Vueform表单提交+ajax异步请求+分页效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐