精华内容
下载资源
问答
  • vue axios 使用表单形式进行数据提交

    千次阅读 2018-12-20 11:52:15
    axios 默认使用的是json字符串形式去提交数据,但后端极力要求使用表单形式提交数据(说是json字符串还需要转,会消耗性能)。  由于需要使用表单的数据形式,在前端的项目里面,则需要对数据进行转换,使之成为后端...

            axios 默认使用的是json字符串形式去提交数据,但后端极力要求使用表单形式提交数据(说是json字符串还需要转,会消耗性能)。

           由于需要使用表单的数据形式,在前端的项目里面,则需要对数据进行转换,使之成为后端能够接收的表单数据。

           为了方便对请求进行控制,我将axios进行了封装,方便请求(响应)的拦截,这里就只贴部分代码。

           首先要修改请求头的'Content-Type' ,在axios的配置里面的,将header的 'Content-Type' 改为  'application/x-www-form-urlencoded; charset=UTF-8'。

            其次,我们需要安装一个qs插件,用来将请求数据转换成表单形式。官网有推荐使用qs这个插件

     

          axios的配置中有一个transformRequest,它可以对数据提交前进行数据修改,官网的文档如下:

     我们可以在这个里面对提交前数据进行修改操作。我是在这里使用qs将数据表单化的,具体的代码如下:

     至此,则数据提交就变成表单形式了

    展开全文
  • 详说Vue中axios 表单POST提交

    千次阅读 2020-01-10 14:04:17
    Vue中axios 表单POST提交 后端要求是按表单提交形式给他数据, 这是我的原代码: // axios.post("/HisApi1/wxpay",{ // '/wxpay' // "bodyType": "06", // 09就诊卡充值 06住院预交金 // "totalAmount": this....

    Vue中axios 表单POST提交

    后端要求是按表单提交的形式给他数据,

    这是我的原代码:

     // axios.post("/HisApi1/wxpay",{    //  '/wxpay'
            //   "bodyType": "06",     //  09就诊卡充值    06住院预交金
            //   "totalAmount": this.total,
            //   "payType": "1",
            //   "operatorId": operatorNo,
            //   "businessNo": orderId, 
            //   "payChannel": "03",
            //   "authCode": this.zhifuma,
            //   "emulateJSON":true
            // }).then((result) => {
            //   log.info('------->微信支付成功接口返回数据result',result)
            // }).catch((error) => {
            //   this.$message({
            //         message: 'his接口出错,本机暂停服务,请联系工作人员处理!',
            //         type: 'warning'
            //       })
            // })
    
    

    打开控制台,报400,报错信息是:传递的参数不存在,但在请求中看的到参数,只是参数的格式是Request Payload,具体也没看懂是什么,总之知道就是参数格式不对

    解决方法:

    1.es6写法

    import qs from 'qs';
    const data = { 
               "bodyType": "06",     //  09就诊卡充值    06住院预交金
               "totalAmount": this.total,
               "payType": "1",
               "operatorId": operatorNo,
               "businessNo": orderId, 
               "payChannel": "03",
               "authCode": this.zhifuma,
               "emulateJSON":true };
    const options = {
      method: 'POST',
      headers: { 'content-type': 'application/x-www-form-urlencoded' },
      data: qs.stringify(data),
      url,
    };
    axios(options);
    
    
    1. 使用params
     var params = new URLSearchParams()
            params.append('bodyType',"06");
            params.append('totalAmount',"0.01");   //  TODO 测试用 之后要改过来
            params.append('payType',"1");
            params.append('operatorId',operatorNo);
            params.append('businessNo',orderId);
            params.append("payChannel","03");
            params.append('authCode',this.zhifuma);
    
            axios.post("/HisApi1/wxpay",params)
            .then((result) => {
              log.info('------> zhiixng ')
               log.info('------->微信支付成功接口返回数据result',result)
            }).catch((error) => {
               log.info('------->微信支付失败接口返回数据error',error)
            })
          
    
    
    展开全文
  • vue表单提交的简单示例详细讲解

    千次阅读 2019-11-29 11:39:27
    表单提交一般是在开发管理系统的时候使用最多。有时候你会需要自定义表单内容以及校验规则。以下是关于Form的属性讲解和一个简单的示例。 给定一个表单,包含有四个内容姓名、年龄、邮箱、爱好,其中除了爱好以外都...

    基本的示例

    表单提交一般是在开发管理系统的时候使用最多。有时候你会需要自定义表单内容以及校验规则。以下是关于Form的属性讲解一个简单的示例

    给定一个表单,包含有四个内容姓名、年龄、邮箱、爱好,其中除了爱好以外都是必填项。
    在这里我把错误信息统一显示在顶部。 实际开发中错误信息一般是在输入框后面或是下面显示

    关于表单form的一些属性

    首先我们来看一下表单form的一些属性

    1. id:表单的唯一标识
    2. name:表单的名字
    3. method:定义表单提交的方法,有两种方法:Post方法和Get方法
    4. action:用于处理表单的服务器端页面(以URL 形式表示)

    表单中的控件有两个属性是非常重要的:name属性和value属性,每一个控件的这两个属性将构成“键值对”提交到action属性所定义的地址(或页面)进行处理。

    示例

    HTML

    <form
          action="https://example.api.com/home"
          id="my_form"
          @submit="checkForm"
          method="get"
          novalidate="true"
        >
          <div class="err_content" v-if="errMsg.length">
            <b>错误提示:</b>
            <ul>
              <li v-for="(err,index) in errMsg" :key="index">{{err}}</li>
            </ul>
          </div>
          <p>
            <label for="user_name">姓名:</label>
            <input id="user_name" name="user_name" type="text" v-model="user_name">
          </p>
          <p>
            <label for="user_age">年龄:</label>
            <input
              id="user_age"
              name="user_age"
              type="number"
              v-model="user_age"
              min="0"
              max="100"
            >
          </p>
          <p>
            <label for="user_email">邮箱:</label>
            <input
              id="user_email"
              name="user_email"
              type="email"
              v-model="user_email"
            >
          </p>
          <p>
            <label for="user_like">爱好:</label>
            <select name="user_like" id="user_like" v-model="user_like">
              <option value="0">看书</option>
              <option value="1">写代码</option>
              <option value="2">看代码</option>
            </select>
          </p>
          <p>
            <button type="submit">提交</button>
          </p>
        </form>
    

    action里面的内容可以是指向你的请求地址+接口名也可以是指向某个页面(例如:demo.aspx);method的取值可以是getpost可不带参数,后台可以根据表单组件的键值对获取到参数值。

    注意顶端的 novalidate="true" 。这个的意思去除浏览器的自主校验,因为浏览器会尝试在 type="email" 的字段校验邮件地址。在这里我们是要自定义校验,所以需要加上这个属性。

    没加novalidate属性提交的时候:
    在这里插入图片描述
    会有这样的提示,这就不会执行我们的自定义校验了,所以把它禁用了。

    js

    export default {
      data() {
        return {
          errMsg: [],
          user_name: null,
          user_age: null,
          user_email: null,
          user_like: null
        }
      },
      methods: {
        checkForm(e) {
          this.errMsg = []
          if (!this.user_name) {
            this.errMsg.push('用户姓名不能为空')
          }
          if (!this.user_age) {
            this.errMsg.push('年龄格式输入错误')
          }
          if (!this.user_email) {
            this.errMsg.push('邮箱不能为空')
          } else if (!this.checkEmail(this.user_email)) {
            this.errMsg.push('邮箱格式不正确')
          }
          if (!this.errMsg.length) {
            return true
          }
          e.preventDefault() // 通知浏览器不要执行与事件关联的默认动作
        },
        checkEmail(email) {
          var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          return reg.test(email)
        }
      }
    }
    

    css

    p {
      width: 80%;
      margin: 0 auto;
    }
    input,
    select {
      display: inline-block;
      width: 50%;
      height: 25px;
    }
    select {
      height: 40px;
    }
    button {
      width: 100px;
      background: rgb(41, 135, 243);
      color: white;
    }
    .err_content li {
      color: red;
    }
    
    运行结果

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • Vue 提交表单

    万次阅读 2019-04-13 15:34:15
    ​​​​​​​表单默认提交方式;传递到后台的将是key-value的形式 格式: name: sun 请输入用户名"> 请输入年龄"> ($event)"> ($event)">提交 methods:{ submit: function(event) {  ...

    1、form标签 @submit.prevent="submit($event)"

    <form @submit.prevent="submit($event)">
    
        <input type="text" class="form-control" placeholder="请输入姓名" name="username">
    
        <input type="submit" value="登陆" class="login" />
    
    </form>
    methods:{
        submit: function(event) {
    
            var formData = new FormData(event.target);
            
            //vue-resource
            this.$http.post('/api', formData).then(res => {
                  // success callback
              }, err => {
                  // error callback
            });
            
            //axios
            axios.post('/user',obj).then(res => {
                // success callback
            }).catch(err => {
                // error callback
            });
        }
    }

    2、formData.append()

    设置参数格式

    •  application/json 

    axios默认提交格式;传递到后台的将是序列化后的json字符串,格式为JSON格式

    格式:{"name": "sun"}

    •  multipart/form-data

    用表单上传文件时,必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data

    格式:Contnet-Disposition: form-data; name=sun

    不同字段以--boundary开始,接着是内容描述信息,最后是字段具体内容。

    如果传输的是文件,还要包含文件名和文件类型信息

    •  text/XML 

    • application/x-www-form-urlencoded 

    ​​​​​​​表单默认提交方式;传递到后台的将是key-value的形式

    格式:name: sun

     <form>
            <input type="text" value="" v-model="name" placeholder="请输入用户名">
            <input type="text" value="" v-model="age" placeholder="请输入年龄">
            <input type="file" @change="getFile($event)">
            <button @click="submitForm($event)">提交</button>
      </form>
    methods:{
        submit: function(event) {
    
            event.preventDefault();
    
            let formData = new FormData();
    
            //下面是表单绑定的data 数据
            formData.append('name', this.name);
            formData.append('age', this.age);
            formData.append('file', this.file);
            
            //vue-resource
            this.$http.post('/api', formData).then(res => {
                  // success callback
              }, err => {
                  // error callback
            });
            
            //axios
    
            //根据后台接收参数格式进行修改
            let config = {
                 headers: {
                   'Content-Type': 'multipart/form-data'
                 }
             }
            
            axios.post('/api',formData, config).then(res => {
                // success callback
            }).catch(err => {
                // error callback
            });
        }
    }
    展开全文
  • Vue中axios 表单POST提交

    千次阅读 2018-11-01 18:10:55
    因为后端要求是按表单提交形式给他数据, 我需要在请求中传递参数,然后按官方文档的格式开始操作,代码如下: axios.post('/user', {  firstName: 'Fred',  lastName: 'Flintstone'  })  .then...
  • html表单美化 与 vue表单数据的自动搜集html表单html表单美化html表单数据提交vue表单数据自动搜集 html表单 input 文本框 <input type="text" placeholder="请输入姓名" value="内容"/> 密码框 <...
  • Vue+Element生成动态表单提交

    千次阅读 2019-08-22 14:56:30
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...动态生成表单提交</title> <!-- 引入Jquery --> <script type="text/javascript" src="../../j...
  • // 选项卡形式显示数据 changes(index) { this.num = index; switch(index){ case 0: this.btns="科技"; break; case 1: this.btns="娱乐"; break; case 2: this.btns="体育"; break; case 3: this....
  • vue2.0+axios表单提交上传图片

    千次阅读 2018-02-08 17:54:43
    需求:vue2+axios提交表单上传图片,发现网上很多的方法不好用,无法实现。下面是自己实验成功的方法。可以按照jquery提交表单的方法实现。这种方式可以成功上传图片,后台接收数据也是解析表单形式下面是一个小...
  • 主要介绍了vue+elementUI 复杂表单的验证、数据提交方案,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue表单时时保存功能

    2020-12-23 14:35:13
    vue表单时时保存功能 利用watch去监听表单的变化 watch:{ dataForm:{ handler:function (newVal,oldVal) { // console.log(newVal,'asdada',oldVal) setTimeout(()=> { this.holdChangeForm() },10000) ...
  • FormData 是 XMLHttpRequest Level 2 新增的一个对象,用来提交表单,其最大的优势是上传二进制文件。 &lt;!--文件上传表单--&gt; &lt;form&gt; &lt;input type="text" value=&...
  • 在使用vue以及axios的过程中,需要将数据以表单形式提交给后台,现在总结一下处理方法。 axios 请求配置中,transformRequest配置允许在向服务器发送前,修改请求数据。 // `transformRequest` 允许在向服务器...
  • post请求以form表单形式提交

    千次阅读 2020-09-01 15:41:51
    { this.getNowFormatDate(), this.mds(), console.log(this.sign) console.log(this.send_time) if(item.goodId.indexOf('yk')>=0) { //post请求以form形式提交 let tempForm = document.createElement('form') ...
  • vue 表单校验(二)

    2019-01-31 11:30:00
    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐,因而一直在研究中 表单校验分类 ...
  • vue 表单验证组件 形式Vuelar (FormVuelar) FormVuelar is a set of predefined vue form components which are designed to automatically display errors coming back from your backend. It works out of the box...
  • Vue表单和动画使用

    2020-10-29 21:20:18
    表单类 //单标签 <label for="">姓名</label><input type="text" v-model="user.texe"> //文字如何显示出来 let v = new Vue({ el: "#app", data: user: { texe: "张三", } }, //单选框...
  • Vue表单验证 Vue有许多插件,Vue插件 vee-validate:vue最好的验证插件。vee-validate 1. vee-validate自然输入校验 使用步骤: 安装: npm i vee-validate 创建独立校验文件utils/validate.js,导入默认校验...
  • vue-element-admin提交表单数据到后端

    千次阅读 2020-09-16 20:02:56
    前几天使用vue-element-admin框架开发了一个简单的后台管理系统,在开发的过程之中也遇到了一些功能,以及对饿了么框架的使用遇到的一些问题,如何解决问题,记录一下。 资料相关 vue-element-admin 推荐指数:star...
  • Vue表单自动保存功能

    2020-02-21 19:24:49
    本文主要是对Vue可能的面试点进行梳理,平时还是要注重知识的积累和储备,才能游刃有余的应对工作和面试,部分题目会给出相关链接供详细学习。 组件通信相关问题 组件通信方式有哪些? 父子组件通信: props 和 ...
  • Vue 表单数据双向绑定 v-mode 每一个Vue项目,每一个系统,肯定涉及到表单的双向数据绑定问题,这一部分是 vue 的重中之重,不是因为知识点复杂,而是因为只要参与 vue 项目的开发,那么就必不可少。 单向绑定 ...
  • vue在不使用表单的情况下,提交数据(大量字段)的判空方法: 该方法允许提交的数据有对象跟数组,对象可以嵌套子对象,数组只能是简单形式的数组,如[1,2,3] requiredParams(target,requiredObj){ for(let i in...
  • 直接上代码 api 接口封装 export function userTypeObj(obj,callback) { // obj 表示你的参数集合 // 返回的接口草callback里边 return request({ method:"PUT", url:"接口地址", data:obj, ...
  • vue 表单封装(利用iview自带组件)

    千次阅读 2019-06-14 15:32:10
    实战代码功能如下 1.inputNumber 数字框 千分位和小数点 处理。(详细功能会另起文章) ...表单字段 10几个20个时候,需要人为的不断拷贝和添加 相同的代码 特别是iview 冗余代码会非常多,ht...
  • vue3形式使用 使用vue3的表单用法
  • Vue项目的时候, 提交数据基本上都是用Axios, 之前做过的表单方面的提交,一直没有空隙进行总结,今天得空进行一下复习和总结:Vue中使用Axios处理包含上传文件的表单提交 可能出现的问题: 常见的问题 1、...
  • vue提交的方式有三种 (1) 使用json格式 (2) 使用form data格式 (3) 使用qs.stringify的格式 使用axios进行提交的时候默认使用的是json格式的字符串。 export default { name: "TestForm", data() { return { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,733
精华内容 2,293
关键字:

vue表单形式提交

vue 订阅