AngularJS的ng Http Request与response格式转换方法


Posted in Javascript onNovember 07, 2016

本文实例讲述了AngularJS的ng Http Request与response格式转换方法。分享给大家供大家参考,具体如下:

angular作为Single Page Application推荐的交互方式当然是基于json的ajax调用。但今天要说的是当你不幸工作在一个遗留或者不可控制的服务上,而这服务是基于非json提交方式(或许是常规表单(form)提交,或者其他自定义数据格式),那么我们只能改变ng内部$http默认request/response格式转化方式。

所幸的是ng $http给我们提供了多种可用方式转化数据格式(下面demo将以form提交方式为例):

***对于部分单独的http request设置:

对于http ajax方式最后一个参数都是关于http的配置信息,其中包括一项transformRequest,我们可以利用transformRequest在ajax发送数据之前改变数据的格式,例如下边的demo:

$http.post("/url", {
   id: 1,
   name: "greengerong"
  }, {
   transformRequest: function(request) {
    return $.param(request);
  }
});

这里利用jQuery的$.param进行表单提交方式的格式转化,所以我们能够看见的request body 为:

id=1&name=greengerong

***对于整个app的http request设置:

如果我们需要对整个http的数据转化格式进行设置,那么可以选用在config阶段对$httpProvider默认行为进行设置:

angular.module("app", [])
.config(["$httpProvider", function($httpProvider) {
   $httpProvider.defaults.transformRequest = [
    function(request) {
     return $.param(request);
    }
   ];
  }
]);

这样我们就可以轻易的转化为form提交方式。

同样$http也为我们提供了transformResponse方式,我们也可以创建自己的response转化,比如json之前加入自定义前缀防止json array攻击等等。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 #Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 #Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 #Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 #Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 #Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 #Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
require.js中的define函数详解
2017/07/10 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
机械绘图员岗位职责
2013/11/19 职场文书
学校募捐倡议书
2014/05/14 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
使用golang编写一个并发工作队列
2021/05/08 Golang
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang