文档章节

angularjs中$http POST请求问题

GlassHeart
 GlassHeart
发布于 2017/03/20 17:39
字数 325
阅读 51
收藏 0

在angular中发出一个POST请求

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

在调试中发现,参数在url上出现了,如?id=123,跟GET请求一样,然后查了一下发现参数的写法(GET用params,用POST/PUT/PATCH/DELETE就是data)修改为:

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

发现发送的参数出现在了request payload里,后端认为参数非法无法获取。查询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: "url地址",  
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } , 
        data: id
    }).success();  

然后确实就转成form data了,但是参数如果是对象还是不行。如果参数是对象,还需要加上transformRequest将参数转成序列化的形式。修改为:

    $http({    
        method: "POST",    
        url: "url地址",   
        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();   

个人觉得好麻烦,于是用$.param()将参数直接序列化,搞定。

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

© 著作权归作者所有

共有 人打赏支持
下一篇: 连接池
GlassHeart
粉丝 9
博文 26
码字总数 73400
作品 0
成都
前端工程师
私信 提问
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
angular的post请求,SpringMVC后台接收不到参数值的解决方案

这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST)@ResponseBodypublic Map<String, Object> save(@RequestParam(val......

Big_BoBo
2014/01/09
0
15
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
Angular 应用解决跨域访问的问题

在前后台分离的应用中,Angular 与 Java 是一对好搭档。但是如果是分开部署应用,则势必会遇到跨域访问的问题。 什么是跨域 启动应用之后,有些浏览器会提示如下告警信息: 这个是典型的跨域...

waylau
2018/12/21
0
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19

没有更多内容

加载失败,请刷新页面

加载更多

jenkins安装

https://my.oschina.net/u/593517/blog/1797968 jenkins 安装 https://my.oschina.net/u/593517/blog/3028175 GIT 安装 https://my.oschina.net/u/593517/blog/3028179 maven 安装 插件安装 ......

Gm_ning
3分钟前
0
0
小言服务端解决方案-监控

框架保证方向,整体包容细节 为保证服务端运行平稳正常,owner应使得系统应保有相应的监控:系统监控,业务监控。而服务运行的平稳高效是否有保障跟监控粒度又成直接的正比关系。本文仅针对开...

重城重楼
15分钟前
0
0
搜索引擎(Elasticsearch搜索详解)

学完本课题,你应达成如下目标: 掌握ES搜索API的规则、用法。 掌握各种查询用法 搜索API 搜索API 端点地址 GET /twitter/_search?q=user:kimchy GET /twitter/tweet,user/_search?q=user:...

这很耳东先生
39分钟前
6
0
浅谈如何减少GC的次数

GC会stop the world。会暂停程序的执行,带来延迟的代价。所以在开发中,我们不希望GC的次数过多。 本文将讨论如何在开发中改善各种细节,从而减少GC的次数。 (1)对象不用时最好显式置为 Nu...

浮躁的码农
40分钟前
1
0
jpa 自定义返回对象

任何ORM框架都少不了开放自定义sql的问题。jpa自然也不例外,很多场景需要写复杂sql的。 首先定义一个方法签名,然后打上@Query注解。像下面这样,需要注意nativeQuery,这个表示query中的字...

朝如青丝暮成雪
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部