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

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

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

<#---->

<#---->

返回上传页面

placeholder="请输入appkey">

placeholder="请输入批次号">

v-model.trim="batchInforRequestVO.currentPage">

查询

{{ title }}

{{ content }}

<#--取 消-->

确 定

{{ title }}

{{ content }}

<#--取 消-->

确 定

v-on:click="redirectTo(index)" id="opreat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >自定义导出

每页10条记录 当前页{{batchInforRequestVO.currentPage}} &nbsp

共{{totalPage}}页&nbsp←上一页&nbsp &nbsp

id="nextPage" v-on:click="changePage(2)" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页 →

id="nextPage" v-on:click="changePage(2)" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页 →

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。