AngularJS出现$http异步后台无法获取请求参数问题的解决方法

本文实例讲述了AngularJS出现$http异步后台无法获取请求参数问题的解决方法。分享给大家供大家参考，具体如下：

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

原理分析（网上的分析）：

对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下：

var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {  if(xmlhttp.readystate == 4 && xmlhttp.status == 200) {    var response = xmlhttp.responseText;  }else if(xmlhttp.status == 400) { //或者可以是任何以4开头的状态码    //优雅地处理错误  }};//建立连接xmlhttp.open("GET", "http://myserver/api", true);//发起请求xmlhttp.send();

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

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

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

$http.get('api/user', {params: {id:'5'}}).success(function(data, status, headers, config) {  //加载成功之后做一些事}).error(function(data, status, headers, config) {  //处理错误});

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

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

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

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

一.进一步配置请求

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