angular在通过异步提交数据时使用了与jquery不一样的请求头部和数据序列化方式,导致部分后台程序无法正常解析数据。

 

原理分析(网上的分析):

[javascript] view plaincopyprint?
  1. <span style="font-size:14px;">对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码,最后处理服务端的响应。整个过程示例如下:</span>
[javascript] view plaincopyprint?
  1. var xmlhttp = new XMLHttpRequest();
  2. xmlhttp.onreadystatechange = function() {
  3. if(xmlhttp.readystate == 4 && xmlhttp.status == 200) {
  4. var response = xmlhttp.responseText;
  5. }else if(xmlhttp.status == 400) { //或者可以是任何以4开头的状态码
  6. //优雅地处理错误
  7. }
  8. };
  9. //建立连接
  10. xmlhttp.open("GET", "http://myserver/api", true);
  11. //发起请求
  12. xmlhttp.send();

对于简单、常用而且会经常重复的任务来说,这是一种很烦琐的工作。如果你想复用以上过程,你应该进行封装或者使用代码库。

AngularJS XHR API遵守一种通常被称为Promise的接口。由于XHR是异步调用的方法,所以服务端的响应会在未来某个不确定的时间点上返回(我们希望它立即能返回)。Promise接口规定了处理这种响应的方式,并且允许Promise的使用者以一种可预见的方式来使用它。

例如,我们要从服务端获取一个用户的信息,假设用来接受请求的后台接口位于/api/user路径上,此接口可以接受一个id属性作为URL参数,那么使用Angular的核心$http服务发起XHR请求的方法示例如下:

[javascript] view plaincopyprint?
  1. $http.get('api/user', {params: {id:'5'}
  2. }).success(function(data, status, headers, config) {
  3. //加载成功之后做一些事
  4. }).error(function(data, status, headers, config) {
  5. //处理错误
  6. });

如果你是jQuery使用者,你应该会发现,AngularJS和jQuery在对异步请求的处理方面非常类似。

上面例子中使用的$http.get方法是AngularJS的核心服务$http所提供的众多快捷方法之一。类似地,如果你想使用AngularJS向同一个URL发送POST请求,同时带上一些POST数据,你可以像下面这样做:

[javascript] view plaincopyprint?
  1. var postData = {text:'long blob of text'};
  2. //下面这一行会被当成参数附加到URL后面,所以post请求最终会变成/api/user?id=5
  3. var config = {params: {id: '5'}};
  4. $http.post('api/user', postData, config
  5. ).success(function(data, status, headers, config) {
  6. //成功之后做一些事情
  7. }).error(function(data, status, headers, config) {
  8. //处理错误
  9. });

对于大多数常用的请求类型,都有类似的快捷方法,这些请求类型包括:GET、HEAD、POST、DELETE、PUT、JSONP。

一.进一步配置请求

虽然标准的请求方式使用起来比较简单,但是,有时候会存在可配置性不佳的缺点。如果你想要实现下面这些事情就会遇到困难:

a.给请求加上一些授权头。

b.修改对缓存的处理方式。

c.用一些特殊的方式来变换发送出去的请求,或者变换接收到的响应。

在这些情况下,你可以给请求传递一个可选的配置对象,从而对请求进行深度配置。在前面的例子中,我们使用config对象指定了一个可选的URL参数。但是那里的GET和POST方法是一些快捷方式。这种深度简化之后的方法调用示例如下:

$http(config)

下面是一个基本的伪代码模板,用来调用前面的这个方法:

[javascript] view plaincopyprint?
  1. $http({
  2. method: string,
  3. url: string,
  4. params: object,
  5. data: string or object,
  6. headers: object,
  7. transformRequest: function transform(data, headersGetter) or an array of functions,
  8. transformResponse: function transform(data, headersGetter) or an array of functions,
  9. cache: boolean or Cache object,
  10. timeout: number,
  11. withCredentials: boolean
  12. });

GET、POST及其他快捷方法都会自动设置method参数,所以不需要手动设置。config对象会作为最后一个参数传递给$http.get和$http.post,所以,在所有的快捷方法内部都可以使用这个参数。你可以传递config对象来修改发送的请求,config对象可以设置以下键值。

method:一个字符串,表示HTTP请求的类型,例如GET或者POST。

url:URL字符串,表示请求的绝对或者相对资源路径。

params:一个键和值都是字符串的对象(确切来说是一个map),表示需要转换成URL参数的键和值。例如:

[{key1: 'value1', key2: 'value2'}]

将会被转换成

?key1=value&key2=value2

并会被附加到URL后面。如果我们使用js对象(而不是字符串或者数值)作为map中的值,那么这个js对象会被转换成JSON字符串。

data:一个字符串或者对象,它会被当作请求数据发送。

timeout:在请求超时之前需要等待的毫秒数。

二.设置HTTP头

AngularJS带有一些默认的请求头,Angular发出的所有请求上都会带有这些默认的请求头信息。默认请求头包括以下两个:

1.Accept:appliction/json,text/pain,/

2.X-Requested-With: XMLHttpRequest

如果想设置特殊的请求头,可以用如下两种方法实现。

第一种方法,如果你想把请求头设置到每一个发送出去的请求上,那么你可以把需要使用的特殊请求头设置成AngularJS的默认值。这些值可以通过$httpProvider.defaults.headers配置对象来设置,通常会在应用的配置部分来做这件事情。所以,如果你想对所有的GET请求使用“DO NOT TRACK"头,同时对所有请求删除Requested-With头,可以简单地操作如下:

[javascript] view plaincopyprint?
  1. angular.module('MyApp', []).
  2. config(function($httpProvider) {
  3. //删除AngularJS默认的X-Request-With头
  4. delete $httpProvider.default.headers.common['X-Requested-With'];
  5. //为所有GET请求设置DO NOT TRACK
  6. $httpProvider.default.headers.get['DNT'] = '1';
  7. });

如果你只想对某些特定的请求设置请求头,但不把它们作为默认值,那么你可以把头信息作为配置对象的一部分传递给$http服务。同样的,自定义头信息也可以作为第二个参数的一部分传递给GET请求,第二个参数还可以同时接受URL参数。

$http.get('api/user', {//设置Authorization(授权)头。在真实的应用中,你需要到一个服务里面去获取auth令牌headers: {'Authorization': 'Basic Qzsda231231'},params: {id:5}
}).success(function() {//处理成功的情况 });

三.缓存响应

对于HTTP GET请求,AngularJS提供了一个开箱即用的简单缓存机制。默认情况下它对所有请求类型都不可用,为了启用缓存,你需要做一些配置:

[javascript] view plaincopyprint?
  1. $http.get('http://server/myapi', {
  2. cache: true
  3. }).success(function() {//处理成功的情况});

这样就可以启用缓存,然后AngularJS将会缓存来自服务器的响应。下一次向同一个URL发送请求的时候,AngularJS将会返回缓存中的响应内容。缓存也是智能的,所以即使你向同一个URL发送多次模拟的请求,缓存也只会向服务器发送一个请求,而且在收到服务端的响应之后,响应的内容会被分发给所有请求。

但是,这样做有些不太实用,因为用户会先看到缓存的旧结果,然后看到新的结果突然出现。例如,当用户即将点击一条数据时,它可能会突然发生变化。

注意,从本质上来说,响应(即使是从缓存中读取的)依然是异步的。换句话说,在第一次发出请求的时候,你应该使用处理异步请求的方式来编码。

四.转换请求和响应

对于所有通过$http服务发出的请求和收到的响应来说,AngularJS都会进行一些基本的转换,包括如下内容。

1.转换请求

如果请求的配置对象属性中包含JS对象,那么就把这个对象序列化成JSON格式。

2.转换响应

如果检测到了XSRF(Cross Site Request Forgery的缩写,意为跨站请求伪造,这是跨站脚本攻击的一种方式)前缀,则直接丢弃。如果检测到了JSON响应,则使用JSON解析器对它进行反序列化。

如果你不需要其中的某些转换,或者想自已进行转换,可以在配置项里面传入自已的函数。这些函数会获取HTTP的request/response体以及协议头信息,然后输出序列化、修改之后的版本。可以使用transformLRequest和transformResponse作为key来配置这些转换函数,而这两个函数在模块的config函数中是用$httpProvider服务来配置的。

我们什么时候需要使用这些东西呢?假设我们有一个服务,它更适合用jQuery的方式来操作。POST数据使用key1=val1&key2=val2(也就是字符串)形式来代替{key1:val1, key2:val2}JSON格式。我们可以在每个请求中来进行这种转换,也可以添加一个独立transformRequest调用,对于当前这个例子来说,我们打算添加一个通用的transformRequest,这样所有发出的请求都会进行这种从JSON到字符串的转换。下面就是实现方式:

[javascript] view plaincopyprint?
  1. var module = angular.module('myApp');
  2. module.config(function($httpProvider) {
  3. $httpProvider.defaults.transformRequest = function(data) {
  4. //使用jQuery的param方法把JSON数据转换成字符串形式
  5. return $.param(data);
  6. };
  7. });

实列配置:

在使用中发现后台程序还是无法解析angular提交的数据,对比后发现头部缺少‘X-Requested-With’项

所以在配置中加入:$httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest'

下面贴入测试时的部分配置代码:

[javascript] view plaincopyprint?
  1. angular.module('app', [
  2. 'ngAnimate',
  3. 'ngCookies',
  4. 'ngResource',
  5. 'ngRoute',
  6. 'ngSanitize',
  7. 'ngTouch'
  8. ],function ($httpProvider) {
  9. // 头部配置
  10. $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
  11. $httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript, */*; q=0.01';
  12. $httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
  13. /**
  14. * 重写angular的param方法,使angular使用jquery一样的数据序列化方式  The workhorse; converts an object to x-www-form-urlencoded serialization.
  15. * @param {Object} obj
  16. * @return {String}
  17. */
  18. var param = function (obj) {
  19. var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
  20. for (name in obj) {
  21. value = obj[name];
  22. if (value instanceof Array) {
  23. for (i = 0; i < value.length; ++i) {
  24. subValue = value[i];
  25. fullSubName = name + '[' + i + ']';
  26. innerObj = {};
  27. innerObj[fullSubName] = subValue;
  28. query += param(innerObj) + '&';
  29. }
  30. }
  31. else if (value instanceof Object) {
  32. for (subName in value) {
  33. subValue = value[subName];
  34. fullSubName = name + '[' + subName + ']';
  35. innerObj = {};
  36. innerObj[fullSubName] = subValue;
  37. query += param(innerObj) + '&';
  38. }
  39. }
  40. else if (value !== undefined && value !== null)
  41. query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
  42. }
  43. return query.length ? query.substr(0, query.length - 1) : query;
  44. };
  45. // Override $http service's default transformRequest
  46. $httpProvider.defaults.transformRequest = [function (data) {
  47. return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  48. }];
  49. }).config(function ($routeProvider) {
  50. $routeProvider
  51. .when('/', {
  52. templateUrl: 'views/main.html',
  53. controller: 'MainCtrl'
  54. })
  55. .when('/about', {
  56. templateUrl: 'views/about.html',
  57. controller: 'AboutCtrl'
  58. })
  59. .otherwise({
  60. redirectTo: '/'
  61. });
  62. });

转载于:https://www.cnblogs.com/cook/p/4582872.html

AngularJS $http 异步后台无法获取请求参数相关推荐

  1. SpringBoot+Swagger2.7进行接口测试后台无法获取请求参数

    场景 使用Swawgger2.7的UI页面进行接口测试时,传递参数,后端的方法无法获取请求的参数. 请求参数页面 后台接受参数的方法 后端完整代码 @Description("废料包材回收入 ...

  2. postman发送post请求,用request.getParameter()获取请求参数

    1.接口代码 @RequestMapping("notifyUrl")   public void notifyUrl(HttpServletRequest request, Ht ...

  3. 在拦截器中获取请求参数,[Ljava.lang.String; cannot be cast to java.lang.String报错

    Map<String,Object> parametersmap=invocation.getInvocationContext().getParameters();//获取请求参数    ...

  4. 示例Express中路由规则及获取请求参数

    本次给大家分享一篇基于express中路由规则及获取请求参数的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. express中常见的路由规则 ...

  5. 获取请求参数通用方式|| 中文乱码问题||请求转发

    1. 获取请求参数通用方式:不论get还是post请求方式都可以使用下列方法来获取请求参数 1. String getParameter(String name):根据参数名称获取参数值    use ...

  6. 拦截器获取请求参数post_SpringBoot拦截器如何获取http请求参数

    1.1.获取http请求参数是一种刚需 我想有的小伙伴肯定有过获取http请求的需要,比如想 前置获取参数,统计请求数据 做服务的接口签名校验 敏感接口监控日志 敏感接口防重复提交 等等各式各样的场景 ...

  7. Request_获取请求参数中文乱码问题处理

    * 中文乱码问题:                 * get方式:tomcat 8 已经将get方式乱码问题解决了                 * post方式:会乱码              ...

  8. Request_获取请求参数通用方式演示

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  9. Request_获取请求参数通用方式介绍

    1. 获取请求参数通用方式:不论get还是post请求方式都可以使用下列方法来获取请求参数             1. String getParameter(String name):根据参数名称 ...

最新文章

  1. 数据结构——折半查找
  2. Laravel 5.2问题-----postman进api的post请求,为什么出现Forbidden?
  3. 漫画 | 公司测试因提Bug不规范,锒铛入狱~
  4. 深度学习之卷积神经网络(Convolutional Neural Networks, CNN)
  5. pytorch自定义数据集和数据加载器
  6. 操作系统——进程与线程
  7. Linux运维基础入门(二):网络基础知识梳理02
  8. mycat 读写分离 处理延时
  9. 操作系统 unix v6
  10. QT5.9的安装和配置
  11. 前后端分离 -- 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~
  12. 清华大学建筑学计算机,建筑专业十强大学排名:清华第一,第四堪称黑马
  13. HTML5七夕情人节表白网页(蓝色背景3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心
  14. 【https】利用keytool进行证书配置
  15. java.util 语言_java中的import java.util是什么意思
  16. STM32F103RCT6+BTN7971B+JGB37-520+PWM驱动电机
  17. 计算机自带录像视频文件代码,Windows自带录屏如何录制视频文件?
  18. java.io.FileNotFoundException: class path resource [com/wisely/highlight_spring4/ch2/aware/text.txt]
  19. SAP_ALV(CL_SALV_TABLE)
  20. java.lang、java.io、java.net、java.util解释整理

热门文章

  1. Tips - C++
  2. Nginx+Tomcat负载均衡
  3. Work measurement II
  4. social science and IP
  5. 还记得范进中举的故事吗
  6. csdn的自动化评论
  7. UNITY 手游(安卓)如何使用C/C++代码
  8. 我的自我介绍以及决心书
  9. Apache Storm 官方文档 —— 源码组织结构
  10. win8下面卸载MYSQL数据库