废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!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异步请求+分页效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
