精华内容
下载资源
问答
  • 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+axios发送异步的请求后端一直获取不出axios提交的form表单的数据,爬坑两个半...
  • 主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下
  • 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+axios发送异步的请求后端一直获取不出axios提交的form表单的数据,爬坑两个半...

    踩坑Axios提交form表单几种格式

    前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+axios发送异步的请求后端一直获取不出axios提交的form表单的数据,爬坑两个半钟头找到了答案

    axios用post异步形式提交的数据和我们直接使用from表单提交的数据的格式(Form Data格式)是不一样的,在下面列举

    默认格式Request Payload

    直接使用axios发送异步请求,没任何处理的代码如下:

    
    const service = axios.create({})
    
    doLogin (pojo) {
        return request({
          url: '/api/user/login',
          method: 'post',
          data: pojo
        })

    这种方式提交的表单格式是默认是RequestPayload, 它的长下面这个样子

    1496926-20190810234419687-288094.png

    可以看到,它的Contet-type是 "Content-Type": "application/json;"
    但是后台的SpringSecurity对这种结果可不买单,在Request中解析不出任何数据来

    处理成Form Data格式

    使用插件qs, 安装命令如下:

    npm install --save qs

    请求编码:

    
    const service = axios.create({})
    
      doLogin (pojo) {
        return request({
          url: '/api/user/login',
          method: 'post',
           data: qs.stringify(pojo)
        })
      }
      
      或者
      
      doLogin (pojo) {
        return request({
          url: '/api/user/login',
          method: 'post',
          data: pojo ,
           transformRequest: [function (data) {
            data = qs.stringify(data);
            return data;
          }],
        })
      }

    经过这样处理的表单数据长成下面的这样, 这也是我们最常用的Form Data格式,这种格式的数据可以从后台的HttpRequest中把提交的属性解析出来

    1496926-20190810234413372-1079415829.png


    其他类型的Content-Type对应的表单数据格式

    const service = axios.create({
      headers: {
          "Content-Type": "multipart/form-data;  charset=utf-8;"
          }
    })
    
     doLogin (pojo) {
        return request({
          url: '/api/user/login',
          method: 'post',
          data: qs.stringify(pojo)
           })
      }
    

    它长这样
    1496926-20190810234405924-2131977830.png


    
    const service = axios.create({
      headers: {
          "Content-Type": "multipart/form-data;  charset=utf-8;"
          }
    })
    
     doLogin (pojo) {
        return request({
          url: '/api/user/login',
          method: 'post',
          data: pojo
           })
      }
    ---

    1496926-20190810235120845-407979088.png

    const service = axios.create({
      headers: {
          "Content-Type": "multipart/form-data;  charset=utf-8;"
          }
    })
    
     doLogin (pojo) {
        return request({
          url: '/api/user/login',
          method: 'post',
          data:pojo
           })
      }
    

    1496926-20190810234603466-980004239.png


    const service = axios.create({
      headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8;"
      }
    })
    
      doLogin (pojo) {
        return request({
          url: '/api/user/login',
          method: 'post',
          data: qs.stringify(pojo)
        })
      }

    1496926-20190810234610240-1761374950.png

    转载于:https://www.cnblogs.com/ZhuChangwu/p/11333549.html

    展开全文
  • <form @submit.prevent="submit($event)"> <input type="text" class="form-control" placeholder="请输入姓名" name="cuserName"...

    <form @submit.prevent="submit($event)">

        <input type="text" class="form-control" placeholder="请输入姓名" name="cuserName">

        <input type="submit" value="立即注册" class="denglucon" />

    </form>



    submit: function(event) {

            var formData = new FormData(event.target);

                                    $.ajax({
    type: "post",
    url: that.service + "/register",
    dataType: 'json',
    contentType: false,
    processData: false,
    data: formData,
    success: function(res) {
    if(res.status != 200) {
    alert(res.msg)
    return false;
    }
    }
    });

    }

    展开全文
  • Vue form 表单提交+ajax异步请求+分页

    千次阅读 2017-04-21 17:59:58
    <!DOCTYPE html> ,initial-scale=1"> 异步参数上传 <lin
    <!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;
            }
    
    
        }
    
    })
    
    
    
    
    展开全文
  • 废话不多说了,直接给大家贴代码了,具体代码如下所示:异步参数上传-->-->var $context = {};$context.ctx = '${ctx}';$context.resources = '${ctx}/resources';返回上传页面placeholder="请输入appkey">...

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

    异步参数上传

    -->

    -->

    $context.ctx = '${ctx}';

    $context.resources = '${ctx}/resources';

    placeholder="请输入appkey">

    placeholder="请输入批次号">

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

    查询

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

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

    展开全文
  • 废话不多说了,直接给大家贴代码了,具体代码如下所示:异步参数上传-->-->var $context = {};$context.ctx = '${ctx}';$context.resources = '${ctx}/resources';返回上传页面placeholder="请输入appkey">...
  • 写前端项目时vue表单验证突然变成异步了,导致如果获取校验函数的返回值,应该是升级iview组件导致的,这里记录一下改为同步的一种写法 实现功能:表单中进行规则设置,当触发提交或者流程中的下一页时触发这些规则...
  • // 保存按钮事件, 校验form表单是否合法 return new Promise((resolve, reject) => { _this.$refs[name].validate(res => { if (!res) { _this.$Message.error('请根据提示信息补全提交的内容信息') } ...
  • 用户输入时,在用户离开输入字段之后或在提交整个表单之前。 本课程还涵盖有关验证者职责和异步验证的理论和最佳实践。 如果您想学习如何将新的Vue.js Form技能用于实际应用程序中,可以查看 参观观看课程。
  • vue中通过post方式异步上传文件

    万次阅读 2018-03-13 11:16:20
    功能需求:根据后台接口需求,需通过异步的方式post提交上传文件,并根据返回的信息作出相应的提示。页面已提前写好了,如下:思路分析:1、创建一个FormData空对象,然后使用append方法添加key/value。选择formData...
  • 如下图所示,左侧为菜单,点击设置当前表单展示的数据,右侧表单展示左侧的表单数据,即arr[k] = formData,在提交表单时,需要逐个校验arr[k]的必填项,校验通过则可提交,不通过则将表单停留在当前不通过的表单上...
  • 发布时间:2019-01-07 整理:编程之家...动态渲染就是有一个异步的数据,大概长这样:然后你需要把这个json渲染成这样:最后提交表单的数据长这样:然后我们目标就是封装这样一个组件:实现开始之前,你需要知道 ...
  • Ajax的产生主要是因为在没有异步请求的时候,网络使用的都是同步请求,设想一下你在填写银行办卡的业务表单,花费了十几分钟好不容易写完了发送同步请求到服务器提交表单,但因为同步请求的特性,在上传以及服务器...
  • 做项目时遇到上传excel文件到后台,项目使用的是elementUI组件,直接使用element的Upload上传,但是需求是需要用户选择完文件,并且输入文件描述,然后一起上传到后台,类似于form表单提交   (1).vue html  ...
  • 在开发的过程中 有时根据业务需求提交的表单...如上图所示 页面表单分为基本设置,上架设置,更多设置3大块 分别将3大块写到3个组件(A,B,C) 提交表单的时候我们要进行表单验证 思路:利用ES6 Promise异步控制 代...
  • Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】目 录1、Vue表单原生JS实现异步表单提交运行截图代码核心指令单选框、密码框、多行文本框单选多选勾选下拉列表(每个option标签都要有value值)组件...
  • 原生JS实现异步表单提交 运行截图 代码 核心指令 单选框、密码框、多行文本框 单选 多选 勾选 下拉列表(每个option标签都要有value值) 组件汇总案例 运行截图 代码 ToDoList案例 JS堆栈内存图 运行截图 代码 2、...
  • vue-ajax

    2019-08-22 00:05:38
    1.异步提交Ajax的方式把数据提交到后台,得阻止表单默认提交行为 2.收集表单中的数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <...
  • axios实现表单的验证提交 1、Demo描述: 1)登录: 检查学生号,密码是否为空。 思路:用vue的v-model实现数据的双向绑定 检查该用户是否存在。 思路: 用axios.get来实现异步查 2)注册: 检查学生号,...
  • 页面异步发出get请求获取数据,提交表单异步post数据到服务端 客户端 客户端代码 代码解析: // 服务端请求地址 let url = 'http://local.php.com/index.php'; let vm = new Vue({ el: "#app", data: { list: ...
  • (ps:说白了就是不使用form表单实现form表单提交数据或文件,如果还是不懂,请自行百度) 实现过程 1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式) 2.修改input框的默认样式 3...
  • 在使用axios时,注意到配置选项中包含params和data...vue开发推荐使用axios进行ajax异步请求,然而使用axios进行post表单提交时默认使用的Content-Type“为application/json” 而大多数的web服务器只能识别post请...
  • 前言:老工程师引用的图标是阿里巴巴矢量图标,我还没弄...要说的就是将数据异步提交到vuex,如果返回数据成功,则跳转到“/”页面。   vuex的actions接收login页面发过来的请求,并发送登录接口给后台(涉及axi...
  • 问题描述:最近在使用vue全家桶开发前端,后端框架是django,我在使用axios做前端异步请求时,除了get之外的请求方法django都会返回403状态码,表单总是提交不上去。分析原因:通过chrome浏览器的network中,了解到...
  • START 仅以此文,纪念这个离谱的bug,o(╥﹏╥)o 问题 长话短说,使用axios进行请求,浏览器f12检查,请求成功。但是代码逻辑还是进入axios的catch模块。...例如 form表单,点击按钮提交后,表单会刷新 特殊情况

空空如也

空空如也

1 2
收藏数 39
精华内容 15
关键字:

vue异步提交表单

vue 订阅