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

最新推荐文章于 2024-06-25 15:53:03 发布
最新推荐文章于 2024-06-25 15:53:03 发布
阅读量7.4k 收藏 7
点赞数 1
分类专栏： 前端框架 文章标签： vue-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyinhe110808/article/details/70334407
版权 
<!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">
    <#--<link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>-->
    <link href="${ctx }/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="${ctx }/css/css.css"/>
    <#--<link rel="stylesheet" type="text/css" href="${ctx }/css/style.css"/>-->
    <link rel="stylesheet" type="text/css" href="${ctx }/css/subwelcome.css"/>
    <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="#">导出 </a><a
                            v-on:click="redirectTo(index)" id="opreat" href="#">自定义导出 </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> &nbsp
                <span>共{{totalPage}}页&nbsp<a id="previousPage" v-on:click="changePage(1)" href="#">←上一页</a>&nbsp &nbsp<a
                        id="nextPage" v-on:click="changePage(2)" href="#">下一页 →</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;
        }


    }

})
liuyinhe110808
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
还在写重复的增删改查的重复代码？还在重复写Ajax请求？Vue2+Element-ui实现常规后台查询展示页面来了
weixin_38356321的博客
02-01 530
还在写重复的增删改查的重复代码？还在重复写Ajax请求？Vue2+Element-ui实现常规后台查询展示页面来了
Springboot+Vue+Element实现的CRM管理系统
zzzzzkkk的博客
08-10 2392
文章介绍 本文主要记录使用springboot和vue进行整合开发流程，实现前后端分离，具体步骤和知识点都会讲解记录或者是在注释中进行说明。使用Element工具提供组件，实现（CRM）客户关系管理的一个系统。开发工具使用Idea和Vscode,使用vue-cli搭建项目，实现前后端分离。下文将对项目的用户管理模块进行讲解记录，管理员可对用户进行添加，删除，修改，查询等功能。后端控制层使用REST风格提供接口 项目搭建，如果已经安装过vue-cli脚手架可跳过这一步，使用Idea的搭建springboot就
vue12ajax提交表单
08-10
vue1/2 ajax提交表单
自定义表单提交筛选分页怎么做_Vue form 表单提交+ajax异步请求+分页效果
weixin_35182991的博客
12-29 160
废话不多说了，直接给大家贴代码了，具体代码如下所示：异步参数上传-->-->var $context = {};$context.ctx = '${ctx}';$context.resources = '${ctx}/resources';返回上传页面placeholder="请输入appkey">placeholder="请输入批次号">v-model.trim="bat...
如何在Vue3中创建一个简单的表单，并处理表单提交
最新发布
有我更精彩的博客
06-25 1365
在现代Web应用开发中，前端框架的选择对开发效率和应用性能有着重大的影响。Vue.js 作为一个渐进式JavaScript框架，以其学习曲线低、性能高及生态系统完善，被越来越多的开发者使用。在这篇文章中，我们将探讨如何在Vue 3中创建一个简单的表单，并处理表单提交。
vue2.0ajax,用ajax在Vue.js中提交表单
weixin_34279705的博客
08-05 272
我真的被困在如何使用提交表单的方式使用Vue.js和vue-resource发出ajax请求，然后使用响应来填充div。用ajax在Vue.js中提交表单我做这个项目从与JS项目/ jQuery的是这样的：鉴于刀片{!! Form::open(['route' => 'formRoute', 'id' => 'searchForm', 'class' => 'form-inlin...
Vue form 表单提交+ajax异步请求+分页效果
08-30
主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下
vue 表单提交
weixin_33857679的博客
01-12 4379
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery+ajax
03-26
利用AJAX，可以实现表单的无刷新提交： ```javascript $("#myForm").submit(function(event) { event.preventDefault(); // 阻止默认的表单提交行为 var formData = $(this).serialize(); // 获取表单数据 $....
vue实现form表单post请求结合Servlet实现文件上传
Megamind_HL的博客
03-26 1015
前端测试页面代码： <template> <div> <input type="file" name="file" @change="change($event)"> </div> </template> <script> export default { crea...
vue提交ajax表单,Vue使用axios AJAX提交请求方法，表单提交
weixin_36433147的博客
08-05 1484
我们在使用jquery时直接可以使用ajax进行请求数据，提交表单。那我们在使用vue时已经没有jquery了，那么我们怎么提交表单，请求数据呢？我们使用axios(读音：爱克斯ios)，以下是知乎读法好了，我们言归正传，说一说vue怎么使用axios提交请求，请求数据ajax在jquery是自带的，只要引入jquery那么就可以使用ajax方法，而在vue中不是默认存在的需要去npm安装axio...
vue中post请求使用form表单格式发送数据
qq_39554240的博客
04-28 1万+
接着上一篇博文讲post请求发送form表达格式的数据（VUE），getSign(“username=” + _this.user.username + “&password=” + _this.user.password)代表的是算签名，下一篇博文讲。 new Vue({ el: ‘#app’, data: { user: {}, result: {} }, // 发送post请求时,不...
vue之form提交
热门推荐
u010674395的专栏
06-11 6万+
helloform_Vue var vm = new Vue({ el: '.hello', data: { inputtext:{} }, methods: { submit: function() { co
vue表单校验 自定义表单 post请求表单
什么风把您给吹来了
07-28 505
这样就完成了其实蛮简单的可以自定义一些规则，或者通过post请求像服务器进行提交验证规则，大概跟这个一样稍微改动一些代码。强烈推荐饿了么UI组件非常好用。参考饿了么ui官方资料。刚学习VUE表单校验。...
Vue初入门（五）—— 数据请求
weixin_44596422的博客
05-18 333
Vue数据请求方式有两大种： 1、第三方提供的数据请求库：axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 2、原生JS提供的请求方式：fetch 一、axios数据请求方式 文档 1、使用axios请求模拟数据 2、使用axios进行get数据请求 3、使用axios进行post数据请求 下面按照顺序来学习下用法 先在官网中引入文件 <script src="https://unpkg.com/axios/dist/axios
vue2 单元测试表单验证和接口请求
qq_25186543的博客
04-20 483
单元测试表单与提交
axios vue 表单验证_Vue乱搞系列之axios发起表单请求
weixin_39752828的博客
01-17 234
简单介绍在半年前尤大就不推荐使用vue-resource了，好像我这么没安全感的人，没人维护的东西不敢碰。1987062-b3255d564903d3d7.png那么axios这个是什么呢？是一个国外友人开发的基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。它有什么用法呢：从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise...
axios vue 表单验证_VUE axios 发送 Form Data 格式数据请求
weixin_29296241的博客
01-31 553
axios 默认是 Payload 格式数据请求，但有时候后端接收参数要求必须是 Form Data 格式的，所以我们就得进行转换。Payload 和 Form Data 的主要设置是根据请求头的 Content-Type 的值来的。Payload 　　 Content-Type: 'application/json; charset=utf-8'Form Data　　 Content-...
vue 使用ajax传输form表单数据
qiuqiu1894的博客
10-11 3368
因为要上传文件，所以选择ajax的方式。后台的最低阅读时间是xxs，但是el-time-picker获得的值，其格式是 HH:mm:ss（这里我屏蔽了年月日）。现在我需要把日期转化格式后再通过form传到后台。 <div> <label>最低阅读时间</label> &...
Vue表单异步提交+AJAX+分页示例与代码实现
文章重点在于实现表单数据的异步提交，通常使用Vue的`v-model`指令绑定表单字段的值，并通过`@submit`事件监听表单提交。在`<form>`标签内部，我们没有直接看到具体的表单元素，但可以推测会有一个或多个输入字段，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值