Vue form submission + ajax asynchronous request + paging effect, vueajax
If you don't talk much about it, paste the Code directly. The specific code is as follows:
<! DOCTYPE html>
Var vue = new Vue ({el: '# app', data: {batchInforRequestVO: {currentPage: 1, appkey: '', batchnum:''}, show: false, showcontent: false, onCancel: false, onOk: false, totalPage: 0, title: 'prompt box ', content: 'Load ...... ', message: 'batch processing', BatchInforResponseVO: []}, methods: {refreshTest: function () {location. reload (true)}, // add the Method add: function () {this. user. names. push ({text: ""})}, // input box Delete method 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 = 'is already the homepage! '; 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 = 'is the last page! '; Return} this. submit () ;}, checkparam: function () {if (this. batchInforRequestVO. appkey = ''& this. batchInforRequestVO. batchnum = '') {vue. showcontent = true; vue. content = 'query parameter cannot be blank! '; 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. ba TchInforRequestVO); // here is your form data if (! Vue. checkparam () {return}; // da. append ("name", this. name) You can add multiple parameters one by one $. ajax ({url :'.. /interface/queryBatchInfor ', data: data, type: 'post', contentType: 'application/json', dataType: 'json', // cache: false, processData: false, // tell jQuery not to process the sent data // contentType: false, // tell jQuery not to set the Content-Type Request Header 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 = 'internal system error' ;}}}, 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 = 'in progress ...... '; debugger var index = $ index; // window. location. href = $ context. ctx + ".. /interface/to_autoconfig? BatchNum = "+ this. BatchInforResponseVO [index]. batchNum ;}}})
The above section describes the Vue form submission + ajax asynchronous request + paging effect provided by Alibaba Cloud. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!