美文网首页
关于angularjs中$http POST请求参数的问题

关于angularjs中$http POST请求参数的问题

作者: 曼巴童鞋 | 来源:发表于2017-11-03 15:35 被阅读0次

    本人angularjs小白,今天遇到这样一个问题。在angularjs中发出这样一个POST请求

    
     $http({  
             method: "POST",  
             url: "",  
             params: id  
     }).success();  
    
    

    在调试中发现,参数在url上出现了,就是以?id=123124的形式出现,跟GET请求变成一样的了,然后查了一下发现参数的写法用GET的时候就是params,用POST/PUT/PATCH/DELETE就是data,修改后

    $http({  
            method: "POST",  
            url: "",  
            data: id  
    }).success();  
    
    

    发现发送的参数出现在了request payload里,后端会认为参数非法无法获取(前一种是序列化的参数a=bbb&c=ddd,后者是参数为一个对象)

    于是查询了POST表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8,在html中form的Content-type默认值:Content-type:application/x-www-form-urlencoded。修改为

    $http({  
                method: "POST",  
                url: "",  
                data: id,  
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }  
            }).success();  
    
    

    然后确实就转成form data了,但是参数如果是对象还是不行

    于是再查资料发现,如果参数是对象,还需要加上transformRequest

    $http({    
                method: "POST",    
                url: "",    
                data: id,    
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },    
                transformRequest: function(obj) {    
                    var str = [];    
                    for (var p in obj) {    
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));    
                    }    
                    return str.join("&");    
                }  
            }).success();   
    
    

    这样终于可以了,其实仔细看transformRequest,也就是把参数转成序列化的形式,所以以后如果使用的话,干脆就写成序列化的形式就好了,省的还要再转一道。jquery中有$.param()方法可以实现,angularjs里面不知道有没有。

    查看原文>> 曼巴童鞋 - 博客 - 关于angularjs中$http POST请求参数的问题

    相关文章

      网友评论

          本文标题:关于angularjs中$http POST请求参数的问题

          本文链接:https://www.haomeiwen.com/subject/miptmxtx.html