精华内容
下载资源
问答
  • axios 发送post请求后端参数为空 解决

    千次阅读 2019-07-24 19:35:59
    axios发送post请求到后端的springboot接口,接口是通的,但是获取到的参数都为null 如:发送name:"csdn" 后端接收到的name就是null 解决办法 axios.post(url, qs.stringify(data),{headers: {'Content-Type': '...

    问题描述

    axios发送post请求到后端的springboot接口,接口是通的,但是获取到的参数都为null

    如:发送name:"csdn"   后端接收到的name就是null

    解决办法

    axios.post(url, qs.stringify(data),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then((res) => {})

    简单来说就是

    1.将请求参数做封装:qs.stringfy(data)

    2.修改content-type的类型

     

    展开全文
  • Vue 使用axios 发送post请求,参数格式有错误问题: 注:网上很多都是使用post发送的例子,但是我使用过程当中,就是参数有问题,一直报参数无法present的问题,后来看到这篇博客,需要引入QS对参数进行转换,且要设置...

    Vue 使用axios 发送post请求,参数格式有错误问题:

    注:网上很多都是使用post发送的例子,但是我使用过程当中,就是参数有问题,一直报参数无法present的问题,后来看到这篇博客,需要引入QS对参数进行转换,且要设置Content-Type,这样就可以了,特别注意QS的功能:
    完全不是一个东西,功能虽然都是序列化。假设我要提交的数据如下
    var a = {name:'hehe',age:10};
    qs.stringify序列化结果如下
    
    name=hehe&age=10
    而JSON.stringify序列化结果如下:
    
    "{"a":"hehe","age":10}"
    第二个坑:使用axios的then之后,要给data赋值,使用this报错,以下是原因和解决方案:
    在then 这个里边的赋值方法this.followed = response.data.followed会出现报错,什么原因呢?在Google上查了下,原来是在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
    可以看下 Stackoverflow 的解释:
    
    In option functions like data and created, vue binds this to the view-model instance for us, so we can use this.followed, but in the function inside then, this is not bound.
    So you need to preserve the view-model like (created means the component's data structure is assembled, which is enough here, mounted will delay the operation more):
    
    解决方法:
    
        created() {
           var self = this;
           axios.post('/api/question/follower', {
               'question':this.question,
               'user':this.user
           }).then(function(response){
               // console.log(response.data);
               self.followed = response.data.followed;
           })
        },
    或者我们可以使用 ES6 的 箭头函数arrow function,箭头方法可以和父方法共享变量 :
    
     created() {
           axios.post('/api/question/follower', {
               'question':this.question,
               'user':this.user
           }).then((response) => {
               this.followed = response.data.followed;
           })
        },




    以下是转载的内容:

    在半年前尤大就不推荐使用vue-resource了,好像我这么没安全感的人,没人维护的东西不敢碰。

    1987062-b3255d564903d3d7.png

    那么axios这个是什么呢?是一个国外友人开发的基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。它有什么用法呢:

    • 从浏览器中创建 XMLHttpRequest
    • 从 node.js 发出 http 请求
    • 支持 Promise API
    • 拦截请求和响应
    • 转换请求和响应数据
    • 取消请求
    • 自动转换JSON数据
    • 客户端支持防止 [CSRF/XSRF](http://baike.baidu.com/link?*url=iUceAfgyfJOacUtjPgT4ifaSOxDULAc_MzcLEOTySflAn5iLlHfMGsZMtthBm5sK4y6skrSvJ1HOO2qKtV1ej_)

    作者这造型一看就是大牛,以后有机会我也要搞一个,浪。


    Paste_Image.png

    反正功能很多啦,用法一搜一大堆。
    英文:点这里看看官网教程

    axios安装

    $ npm install axios
    

    如果不用npm,可以通过cdn引入

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    axios基本用法

    这里笔者使用的是es6,由于标题是要结合vue,因此将vue、axios以及vue-axios引入。

    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    #通过use方法加载axios插件
    Vue.use(VueAxios,axios)
    

    看看有哪些用法:

    axios.request(config)
    
    axios.get(url[, config])
    
    axios.delete(url[, config])
    
    axios.head(url[, config])
    
    axios.post(url[, data[, config]])
    
    axios.put(url[, data[, config]])
    
    axios.patch(url[, data[, config]])
    

    就挑我们最熟悉的get和post来看看:

    GET用法

    .vue模板:

      var vm = this
      this.$http.get(vm.testUrl).then((response)=>{
                        alert(response.data.msg);
       })
    

    这里我们通过this.$http去调用axios,如果之前你的vue-resourse也是这么写的话,那简直可以无缝切换。当然你你换成this.axios也是没有问题的,但扩展性就不好了。

    testUrl:

        public function test(){
            return json(array('status'=>1,'msg'=>'success'));
        }
    

    现象:


    Paste_Image.png

    POST用法

    这个post要重点说下,有坑。
    .vue模板:

      var vm = this
      this.$http.post(vm.testUrl,{"name":"痞子达"})
      .then((response)=>{
              alert(response.data.msg);
      })
    

    testUrl:

       public function test(){
            return json(array('statys'=>1,'msg'=>$_POST['name']));
        }
    

    正常应该弹出“痞子达”,但是并没有,还报了500错误。
    接口提示未定义数组索引: name

    Paste_Image.png

    抓包看了看,是以Request Payload的形式传送了参数。
    不是我们熟悉的form-data形式,看看api:

    axios.post(url[, data[, config]])
    

    第三个参数是config配置,这个配置应该可以做点事儿。这个config的参数有很多,先看看(随便瞅下就行):

    • url —— 用来向服务器发送请求的url
    • method —— 请求方法,默认是GET方法
    • baseURL —— 基础URL路径,假如url不是绝对路径,如https://some-domain.com/api/v1/login?name=jack,那么向服务器发送请求的URL将会是baseURL + url。
    • transformRequest —— transformRequest方法允许在请求发送到服务器之前修改该请求,此方法只适用于PUT、POST和PATCH方法中。而且,此方法最后必须返回一个string、ArrayBuffer或者Stream。
    • transformResponse —— transformResponse方法允许在数据传递到then/catch之前修改response数据。此方法最后也要返回数据。
      headers —— 发送自定义Headers头文件,头文件中包含了http请求的各种信息。
    • params —— params是发送请求的查询参数对象,对象中的数据会被拼接成url?param1=value1&param2=value2。
    • paramsSerializer —— params参数序列化器。
    • data —— data是在发送POST、PUT或者PATCH请求的数据对象。
    • timeout —— 请求超时设置,单位为毫秒
    • withCredentials —— 表明是否有跨域请求需要用到证书
    • adapter —— adapter允许用户处理更易于测试的请求。返回一个Promise和一个有效的response
    • auth —— auth表明提供凭证用于完成http的身份验证。这将会在headers中设置一个Authorization授权信息。自定义Authorization授权要设置在headers中。
    • responseType —— 表示服务器将返回响应的数据类型,有arraybuffer、blob、document、json、text、stream这6个类型,默认是json类似数据。
    • xsrfCookieName —— 用作 xsrf token 值的 cookie 名称
    • xsrfHeaderName —— 带有 xsrf token 值 http head 名称
    • onUploadProgress —— 允许在上传过程中的做一些操作
    • onDownloadProgress —— 允许在下载过程中的做一些操作
    • maxContentLength —— 定义了接收到的response响应数据的最大长度。
    • validateStatus —— validateStatus定义了根据HTTP响应状态码决定是否接收或拒绝获取到的promise。如果 validateStatus 返回 true (或设置为 null 或 undefined ),promise将被接收;否则,promise将被拒绝。
      maxRedirects —— maxRedirects定义了在node.js中redirect的最大值,如果设置为0,则没有redirect。
    • httpAgent —— 定义在使用http请求时的代理
    • httpsAgent —— 定义在使用https请求时的代理
    • proxy —— proxy定义代理服务器的主机名和端口,auth
    • cancelToken —— cancelToken定义一个 cancel token 用于取消请求

    我们发现有一个headers参数,那么对上面的代码修改:

     var vm = this
     this.$http.post(
     vm.testUrl,
     {"name":"痞子达"},
     {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
     .then((response)=>{
             alert(response.data.msg);
    })
    

    加入{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
    但这个时候还是没能够正确弹框,因为我们传过去的是key字符串,并且vlue是没有值的。

    Paste_Image.png

    后端打印出来是这样的:

    array(1) { ["{"name":"痞子达"}"]=> string(0) "" }
    

    这必须获取不到啊,那我们尝试将其转换为query参数。
    引入Qs,这个库是axios里面包含的,不需要再下载了。

    import Qs from 'qs'
     var vm = this
    var data = Qs.stringify({"name":"痞子达"});
     this.$http.post(vm.testUrl,data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((response)=>{
         alert(response.data.msg);
    })
    

    再看:

    Paste_Image.png

    控制台看看那form-data:

    Paste_Image.png

    这才是我们熟悉的样子。

    但是我们不能每次请求都写一遍config,太麻烦了。
    在入口文件main.js修改:

    #创建一个axios实例
    var axios_instance = axios.create({
    #config里面有这个transformRquest,这个选项会在发送参数前进行处理。
    #这时候我们通过Qs.stringify转换为表单查询参数
        transformRequest: [function (data) {
            data = Qs.stringify(data);
            return data;
        }],
    #设置Content-Type
        headers:{'Content-Type':'application/x-www-form-urlencoded'}
    })
    Vue.use(VueAxios, axios_instance)
    

    ok,以后发起http请求,如下即可:

    var vm = this
    this.$http.post(vm.url,data).then((response)=>{
        alert(response.data.msg);
    })
    

    其他的用法和配置大家可以深入研究。

    为什么放弃vue-resource,可以看这里:
    https://github.com/vuefe/vuefe.github.io/issues/186

    展开全文
  • 在vue中使用axios发送post请求参数方式 axios默认的请求发送过去的数据是这个格式 但是后台要求的是 Form Data 格式 所以要对请求的数据做出改变 下面直接给出我的解决方法 首先再项目中下载 qs这个模块 引入这...

    在vue中使用axios发送post请求,参数方式

    在这里插入图片描述
    axios默认的请求发送过去的数据是这个格式 但是后台要求的是
    在这里插入图片描述
    Form Data 格式
    所以要对请求的数据做出改变 下面直接给出我的解决方法
    首先再项目中下载 qs这个模块
    在这里插入图片描述
    引入这个模块
    在这里插入图片描述
    在你的数据前面加上qs.stringify就可以了,这样你的数据发送的就是

    Form Data了
    第三个参数按照我那样写会把请求的头转换为
    在这里插入图片描述
    这个格式 有的时候后台会判断 所以最好加上

    展开全文
  • 第一种 var url = "换成你的地址"; var data = {} axios({ url, data: qs.stringify(data), method: 'post', headers: { 'Conte

    vue 中使用axios 发送post 请求需要使用 qs 模块 将参数 转序列化   发送给 后端 否则接口会出现收不到参数的情况

    import qs from "qs"       记得安装下哦  npm i qs -S

    第一种

    var url = "换成你的地址";
    var data = {}
    axios({
                 url,
                  data: qs.stringify(data),
                   method: 'post',
                 headers: {
                      'Content-Type':'application/x-www-form-urlencoded'
                }
            }).then(res => {
                 console.log(res)
       })

    第二种:

    var url = "换成你的地址";
    var data = {}
    axios.post(url, qs.stringify(data), {
                                headers: {
                                    'Content-Type':'application/x-www-form-urlencoded'
                                }
                            }).then(res => {
                                console.log(res);
                            })

    不用qs 也可以 可以用一种原生的方法  

    new URLSearchParams()    进行处理

    URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

    出来的结果和 qs 转换过一样

    var data = new URLSearchParams() ;

    data.append('time', 11111111);   // 添加数据

    var url = "换成你的地址";
    var data = new URLSearchParams() 
    data.append('time', 15555555);
    axios.post(url, data, {
            headers: {
                  'C':'application/x-www-form-urlencoded'
              }
          }).then(res => {
              console.log(res);
    })

    URLSearchParams.append()

     插入一个指定的键/值对作为新的搜索参数。

    URLSearchParams.delete()

     从搜索参数列表里删除指定的搜索参数及其对应的值。

    URLSearchParams.entries()

     返回一个iterator可以遍历所有键/值对的对象。

    URLSearchParams.get()

     获取指定搜索参数的第一个值。

    URLSearchParams.getAll()

     获取指定搜索参数的所有值,返回是一个数组。

    URLSearchParams.has()

     返回 Boolean 判断是否存在此搜索参数。

    URLSearchParams.keys()

    返回iterator 此对象包含了键/值对的所有键名。

    URLSearchParams.set()

     设置一个搜索参数的新值,假如原来有多个值将删除其他所有的值。

    URLSearchParams.sort()

     按键名排序。

    URLSearchParams.toString()

     返回搜索参数组成的字符串,可直接使用在URL上。

    URLSearchParams.values()

     返回iterator 此对象包含了键/值对的所有值。

     

    关注我 持续更新前端知识  

    展开全文
  • axios发送post请求时,出现了参数后台接收不到的情况,分析了下请求,发现是请求头content-type不对,是application/json,正常应该是application/x-www-form-urlencoded。 解决方法有以下三种: 1、设置axios的...
  • 在玩vue的时候发现axiospost请求参数有问题 1.发送失败的前端代码 this.loading = true let param = {username:this.loginForm.username,password:this.loginForm.password}; console.log(param) this....
  • axios发送post请求时,出现了参数后台接收不到的情况,分析了下请求,发现是请求头content-type不对,是application/json,正常应该是application/x-www-form-urlencoded。 解决方法有以下三种: 1、设置axios的...
  • I am trying to POST some data from Vue.js to a backend based on Symfony using the following code.updateQuestion : function() {axios.post('/staff/question/api/' + this.id,{id : 'test',name : 'sree'}).t...
  • 此文用于解决axios发送post请求时,Spring后台不能直接获取到参数的问题。 问题概述 用axios向后台发送参post请求: 后台无法直接获取参数: 原因分析 通过axios源码可知,当参数为object时,axios做了两件事:...
  • axios发送post请求时,发现是请求头content-type不对,是application/json,应该是application/x-www-form-urlencoded。 解决方法有以下三种: 1、设置axios的默认请求头 //设置全局的 axios.defaults.headers...
  • [解决] Axios发送POST请求,后端接收不到参数响应404问题说明造成问题的原因解决 问题说明 我们在项目中通常都会使用到封装好的axios来发送请求,当我们在发送POST请求时结果响应404。 使用接口测试工具postman、...
  • axios 发送post请求下载文件

    千次阅读 2019-09-02 17:15:12
    我想要实现用axios发送post请求,然后服务器会返回的response是一个文件流,我希望能将这个文件流写入excel,从而实现该excel文件的下载。 可以实现的一种方案: exportData () { const form = this.getSearchForm...
  • 我使用的是vue-cli 可能是发送的数据格式不对,需要添加头信息(content-type)。引入qs插件,用qs转变数据格式。 ...axios.post('/api/xxx/xxx/xxx?'+qs.stringify(newChild), { headers:{ ...
  • 今天小编就为大家分享一篇使用axios发送post请求,将JSON数据改为form类型的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 发送post请求下载文件 ...我想要实现用axios发送post请求,然后服务器会返回的response是一个文件流,我希望能将这个文件流写入excel,从而实现该excel文件的下载。 在网上查阅了相关资料后,我在Axios官方文档...
  • vue / axios 部分实现代码 public Result admLogin(HttpServletRequest request, HttpServletResponse response, String username, String password){ log.info(用户名:{},密码:{},username,password); if...
  • axios发送post请求: 9.2. axios使用别名发送请求:  9.2.1. axios.get()发送get请求  9.2.2. axios.post()发送post请求 9. axios发送请求 Axios 是基于 promise 对Ajax的封装  9.0. axios的引入: 和Vue...
  • 参考我写的另一篇博客vue axios post请求传递 FormData 类型参数 此种形式可以用来传递文件 方案二:请求体形式 前端把参数放到请求体中,后端用@RequestBody注解接收可以是实体类(@RequestBody VO vo),也可以...
  • 在vue中使用axios发送post请求参数方式 由于后台接收的参数格式为FormData格式, 在axios中参数格式默认为FormData格式 在axios中参数格式默认为 在传参数前,将原先官方提供的格式 改为如下: axios({ url: '.....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,059
精华内容 4,823
关键字:

axios发送post请求带参数