精华内容
下载资源
问答
  • 问题描述 params是添加到url的请求字符串中的,一般用于get请求。 ...Axios 中posts的params与data的两种传参 第一种:data方式 this.$axios({ url: '/api/user/login' , method: 'post', heade

    问题描述

    params是添加到url的请求字符串中的,一般用于get请求。
    data是添加到请求体(body)中的, 一般用于post请求。

    上面,只是一般情况. 其实,post请求也可以使用params方式传值 , 但是get请求没有data方式,

    本文就来介绍一下post的两种传值方式

    Axios 中posts的params与data的两种传参

    第一种:data方式

    this.$axios({
       url: '/api/user/login' ,
       method: 'post',
       headers: {
          'Content-Type': 'application/json'
       },
       data:{
          username: this.user,
          pwd: this.pwd
       }
    }).then((res) => {
      console.log(res)
    })
    

    第二种:params方式

    this.$axios({
       url: '/api/user/login' ,
       method: 'post',
       headers: {
          'Content-Type': 'application/json'
       },
       params:{
          username: this.user,
          pwd: this.pwd
       }
    }).then((res) => {
      console.log(res)
    })
    

    注:直接使用post方法,传递的参数为 data 的方式

    代码如下:

    this.$axios.post('/api/user/login',{username: this.user, pwd: this.pwd }),
     {
       headers: {
         'Content-Type': 'application/json'
       }
     }).then((res) => {
     console.log(res)
    

    使用场景

    一般,情况下都是使用 data 的传参方式,但有时会发现需要使用 params 的方式,后台才能获取到数据,这与后台的接口有关,我们前端不能控制。如Java接口

    若使用 Map 接收参数,必须使用 @RequestParam 修饰。但是如果想传list类型的数据,需要使用单独的方法处理(参考链接)。

    若使用 data 传递参数,必须使用一个实体类接收参数,而且需要添加注解 @RequestBody 进行修饰

    展开全文
  • Vue中axios POST传参问题

    万次阅读 2018-04-10 20:02:18
    但是这种方式在用POST传参的时候,还是踩了不少坑。 使用的时候: axios.post('/user', { foo: 'foo', bar: 'bar' }) .then(function (res) { console.log(res); }) .catch(function (error) { console...

    公司目前项目并没有完全实现前后分离的开发模式,在使用vue开发页面的时候,一度使用引入vue.js + zepto.js的方式,请求一直是用 $.ajax()的方式。为了向vue环境靠拢,引入了vue.axios。但是这种方式在用POST传参的时候,还是踩了不少坑。
    使用的时候:

    axios.post('/user', {
        foo: 'foo',
        bar: 'bar'
      })
      .then(function (res) {
        console.log(res);
      })
      .catch(function (error) {
        console.log(error);
      });
    

    这样传参数,后台说接收不到,并且前台查看请求参数的时候,参数的格式还是Request Payload。这在用zepto的$.ajax()方式的时候是从来没有过的。后来查了下资料,原来zepto的ajax方式在传参的时候,默认设置了Content-Type=application/x-www-form-urlencoded,服务器能够正确解析,后台也不用做其他多余设置。而axios默认的则是Content-Type=text/plain,如果前后端都不处理的话,请求是无法成功的(其实当时自己并没有认真看axios的官方文档,其实官方文档已经明确说明了这一点,并且给出了解决方案)。

    方案一:

    最初的方案是前台传JSON格式的数据过去;设置'Content-Type': 'application/json;charset=UTF-8',大概:

    axios.post('/user',JSON.stringify(params),{
    	headers: {
            'Content-Type': 'application/json;charset=UTF-8'
    	 }
    })
      .then(function (res) {
        console.log(res);
      })
      .catch(function (error) {
        console.log(error);
      });
    

    并且后台改变其接收参数的方式改为@RequestBody

    此方法主要参考该博客:https://blog.csdn.net/CarryBest/article/details/80079364

    该博客有个问题,就是接收单个参数的时候,是可行的,但是要是接收多个参数,仍然会报错。解决方法是只要后台设置接收的参数为Map类型或是多个参数组成的类的这种类型(对后台不是很了解,大概是这样。。)

    方案二:

    后来后台反馈,这种方法每个接口都要设置,很麻烦,询问我有没有更好的方法,随后我又自己查阅官方文档,原来官方给出了解决方案。戳这里,看官方文档。

    使用URLSearchParams的API:

    const params = new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    axios.post('/foo', params);
    

    但是该API的浏览器兼容性不是很理想,不过有polyfill,提供了兼容性方案。(https://github.com/WebReflection/url-search-params

    方案三:

    或者引用qs来encode 传入的参数。(https://github.com/ljharb/qs

    const qs = require('qs');
    axios.post('/foo', qs.stringify({ 'bar': 123 }));
    

    当然用es6的语法也可以:

    import qs from 'qs';
    const data = { 'bar': 123 };
    const options = {
      method: 'POST',
      headers: { 'content-type': 'application/x-www-form-urlencoded' },
      data: qs.stringify(data),
      url,
    };
    axios(options);
    

    方案四:

    在node.js里,还可以引入querystring模块。(https://nodejs.org/api/querystring.html

    const querystring = require('querystring');
    axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));
    

    综合考虑,上面方法都不适合我这种传统的引入以vue.js和axios.js进行开发的模式。(适合vue-cli)

    方案五:(最终采用方案)

    仔细看文档的时候发现有个transformRequest参数,类似于拦截器。用于在传递参数前对参数进行处理,于是这里我手动拼接了一下参数,后端无须做任何处理,正常接收就行。

     				axios.post(url, params, {
                        transformRequest: [function (data) {
                            var str='';
                            for (var key in data) {
                                str += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&';
                            }
                            return str;
                        }]
               		} ).then(fulfilled).catch(rejected)
    
    展开全文
  • 很多朋友在使用vue的过程中肯定会用到axios 请求,包括现在vux中已经自带了axios,而且用法也很简单,文档中写的比较清楚,但是当我们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,我记得文档中...
  • 前言 params是添加到url的请求字符串中的,一般用于get请求。 data是添加到请求体...Axios中posts的params与data的两种传参 第一种:data方式 this.$axios({ url: '/api/user/login' , method: 'post', ...

    前言

    params是添加到url的请求字符串中的,一般用于get请求。
    data是添加到请求体(body)中的, 一般用于post请求。

    上面,只是一般情况. 其实,post请求也可以使用params方式传值 , 但是get请求没有data方式,本文就来介绍一下post的两种传值方式

     

    Axios 中posts的params与data的两种传参

    第一种:data方式

    this.$axios({
       url: '/api/user/login' ,
       method: 'post',
       headers: {
          'Content-Type': 'application/json'
       },
       data:{
          username: this.user,
          pwd: this.pwd
       }
    }).then((res) => {
      console.log(res)
    })

    第二种:params方式

    this.$axios({
       url: '/api/user/login' ,
       method: 'post',
       headers: {
          'Content-Type': 'application/json'
       },
       params:{
          username: this.user,
          pwd: this.pwd
       }
    }).then((res) => {
      console.log(res)
    })

    注:直接使用post方法,传递的参数为 data 的方式

    代码如下:

    
    this.$axios.post('/api/user/login',{username: this.user, pwd: this.pwd }),
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then((res) => {
      console.log(res)
    

     

    使用场景

    一般,情况下都是使用data的传参方式,但有时会发现需要使用params的方式,后台才能获取到数据,这与后台的接口有关,我们前端不能控制。如Java接口

    若使用Map接收参数,必须使用 @RequestParam 修饰。但是如果想传list类型的数据,需要使用单独的方法处理(参考链接)。

    若使用data传递参数,必须使用一个实体类接收参数,而且需要添加注解 @RequestBody 进行修饰

    作者:somliy
    链接:https://www.jianshu.com/p/7a24b5eed364

    作者:doubleyong

    公众号:bug收集

    博客:bugshouji.com (专门解决与收集bug的网站)

    展开全文
  • vue axios post传参

    2021-02-17 14:24:05
    1 post发送json import axios from 'axios' let base = ''; export const postRequest = (url, params) => { return axios({ method: 'post', url: `${base}${url}`, data: params, headers: { '...

    1 post发送json

    import axios from 'axios'
    
    let base = '';
    export const postRequest = (url, params) => {
      return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
    
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
        }
      });
    }

    调用

    postRequest("/general/approve", {
                token:value,
                id:row.id
              }).then(resp=> {
                if (resp.data.code == 0) {
                  var data = resp.data;
                  // _this.$message({type: data.status, message: data.msg});
                  if (data.data == 'success') {
                    _this.$message({
                      type: 'success',
                      message: '已提交秘钥: ' + value
                    });
                    window.bus.$emit('ListattackTableReload')//通过选项卡都重新加载数据
                  }
                } el
    展开全文
  • vue axios POST传参问题

    2019-10-28 11:32:24
    因为做到的项目需要ajax与后台交互,用的框架是vue的,自然优先选择了vue的axios 简单做个axios的介绍,官方的原文:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 在vue1.0版本中是使用...
  • 1.背景 今天做项目的时候遇到一...3.1看axios.post 传输参数的格式 Content-Type 为 application/json 类型的,我们需要将这个数据类型变成application/x-www-form-urlencoded 这种类型的,后台才能接收得到 4.解.
  • axios进行post传参出错问题描述:解决办法: 问题描述: 在用axios进行post请求传参时,明明接受到了数据,可是仍然报错——用户名为空。 // addForm表单内容利用post请求 this.$refs.addFormRef.validate((val) =&...
  • axios.post(url, { data:data }, { headers:{'Content-Type':'application/json'} } ) 结果显示错误,百思不得其解。明明参数和url都正确。 查了一下发现,正确的请求体是这样的: 而我错误的请求...
  • Vue中axios踩坑POST传参

    千次阅读 2020-09-01 20:03:35
    vue axios解决post传参数问题 vue框架推荐使用axios来发送ajax请求, 最近写项目时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数。后来进过一番探索,终于发现问题所在。 // 官方实例: axios....
  • axios常见传参方式

    2021-03-16 11:44:19
    axios.get('/user?id=12345&name=user') .then(function (res) { console.log(res); }).catch(function (err) { console.log(err); }); 但是为了方便全局统一调用封装的axios axios.get('/user', { //params...
  • vue 使用axios post方法传参到java后台

    千次阅读 2019-04-12 14:26:37
    使用官方的这种方法 后台取不到参数 ...xios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { conso...
  • 最近用vue+nodejs写项目,前端使用axios向后台传参,发现后台接收不到参数。 后台是node+express框架,然后使用了body-parser包接收参数,配置如下: const express = require('express') const bodyParser = ...
  • axios post请求问题 项目中用的ajax请求是 axios 废话不多说直接上 axios中文文档 我建议在做项目之前先看一下文档,因为说实话这个文档不是太难,先自己吃一下看看能不能咽下去。 我自己在做项目...
  • Vue中axios-POST传参要注意的

    千次阅读 2018-12-24 08:21:05
    刚开始使用Vue,里面的坑是一个接一个,今天就遇到一个axios POST传参的问题,我需要在请求中传递参数,然后按官方文档的格式开始操作,代码如下 axios.post('/user', {  firstName: 'Fred',  lastName: '...
  • axios常见传参方式及基本使用

    千次阅读 2020-08-10 11:19:30
    axios.get('/user?id=12345&name=user') .then(function (res) { console.log(res); }).catch(function (err) { console.log(err); }); 但是为了方便全局统一调用封装的axios axios.get('/user', { //params...
  • 1. post请求传参失败 问题原因: axios发送post请求的content-Type的值是application/json,参数在请求体中以json对象的形式传递,而springMvc框架接受post请求的参数的类型必须要求是键值对的形式 解决办法: ...
  • axios post请求传参失败解决方案

    千次阅读 2018-07-25 19:24:44
    axios.post(url, Qs.stringify(‘所传参数’)) .then(function (response) { const data = response.data; // if (data && data.Code == 200) {} if (data && data.Code...
  • 增加 headers: { 'Content-Type': 'application/json' } 即可
  • Vue和axios传参方式

    2021-07-30 18:52:19
    Vue和axios的四种传参方式: Vue的四种传参方式: 1.通过name来传递参数 在router下的index.js { path: '/hello', name: 'HelloWorld', component:HelloWorld, }, 在外部的对应的.vue中可以获取值 <h2>{{$...
  • axios常见传参方式get/post/put/patch/delete

    万次阅读 多人点赞 2018-06-14 10:17:06
    常见的get post请求之间参考axios官方api 下面主要描述开发过程不常见的传参方式 1:get请求 axios中常见的get请求,是下面这种情况: axios.get('/user?ID=12345',data) .then(function (r...
  • 今天小编就为大家分享一篇解决java使用axios.js的post请求后台时无法接收到入参的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue的axios请求传参 **get请求 ** POST
  • Vue中axios PUT传参问题

    千次阅读 2020-09-22 00:42:09
    问题 this.putRequest('/updatePassword',{newpassword:this.form.newpassword}).then(resp => { console.log('值是:' + resp.message) }) export const putRequest=(url,... return axios({ method: 'put',
  • axios.post 请求传参老是失败,所传参数变成了From data的key,后面会有一个冒号。如下图: ![图片说明](https://img-ask.csdn.net/upload/201812/21/1545383064_334744.png) 代码如下: var instance = ...
  • 在vue 项目中,使用axios 调用后端接口,报类似下面的错误: Required Integer[] parameter 'copyIDs' is not present spring boot 请求中包含数组参数 解决方案: 将下面链接的内容,给后端看看,让他修改...

空空如也

空空如也

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

axiospost传参