从jquery $ .ajax到angular $ http


122

我有一段可以很好地跨源工作的jQuery代码:

jQuery.ajax({
    url: "http://example.appspot.com/rest/app",
    type: "POST",
    data: JSON.stringify({"foo":"bar"}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        console.log("success");
    },
    error: function (response) {
        console.log("failed");
    }
});

现在,我试图将其转换为Angular.js代码,但没有成功:

$http({
    url: "http://example.appspot.com/rest/app",
    dataType: "json",
    method: "POST",
    data: JSON.stringify({"foo":"bar"}),
    headers: {
        "Content-Type": "application/json; charset=utf-8"
    }
}).success(function(response){
    $scope.response = response;
}).error(function(error){
    $scope.error = error;
});

任何帮助表示赞赏。


3
不知道angular.js,但也许faile()是函数的错误名称?
Bogdan Rybak 2012年

发现了另一个问题simular stackoverflow.com/questions/11786562/...
无尽的

可能已经找到了解决方案stackoverflow.com/questions/12111936/…需要深入研究...
2012年

OPTIONS请求将由浏览器发出,对AngularJS /您的应用程序是透明的。如果OPTION成功,则原始请求(POST / GET /无论如何)将紧随其后,并且将针对主要请求而不是OPTION调用您的代码。
pkozlowski.opensource

将请求方法更改为OPTIONS可能不是Angular。您的浏览器可能正在检查是否可以执行CORS请求。如果您尝试调用一个单独的域,则浏览器将首先发出一个OPTIONS请求,以查看是否允许该请求。
2013年

Answers:


202

AngularJS调用$ http的方式如下所示:

$http({
    url: "http://example.appspot.com/rest/app",
    method: "POST",
    data: {"foo":"bar"}
}).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.data = response.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.error = response.statusText;
});

或者可以使用快捷方式将其编写得更简单:

$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.then(successCallback, errorCallback);

有很多事情要注意:

  • AngularJS版本更简洁(尤其是使用.post()方法)
  • AngularJS将负责将JS对象转换为JSON字符串并设置标头(可自定义)
  • 回调函数分别命名success和命名error(也请注意每个回调的参数)-angular v1.5中已弃用
  • 使用then功能代替。
  • 使用的更多信息then可以在这里找到

上面只是一个简单的示例和一些指针,请务必查看AngularJS文档以获取更多信息:http : //docs.angularjs.org/api/ng.$http


2
很高兴知道!但是我不认为我正在处理其客户端错误,Angular将Request方法更改为OPTIONS。认为我必须做一些服务器端的东西来支持它
无止境

是的,我想您需要首先解决服务器端问题。然后,您将可以在客户端上享受angular的$ http的全部功能。可能您会看到一个附加的OPTIONS请求,因为与jQuery相比,AngularJS发送的标头更多/不同。
pkozlowski.opensource,2012年

1
注:GET “PARAMS:”但不是“数据:”看到stackoverflow.com/questions/13760070/...
xander27

5
params并且data有2种不同的东西:参数最终出现在URL(查询字符串)中,而数据最终出现在请求正文中(仅适用于实际上可以具有正文的请求类型)。
pkozlowski.opensource

“ Angular将Request方法更改为OPTIONS。认为我必须做一些服务器端的东西来支持它”
安德鲁·卢林

1

我们可以通过在AngularJs中使用http服务来实现ajax请求,这有助于从远程服务器读取/加载数据。

$ http服务方法如下所示,

 $http.get()
 $http.post()
 $http.delete()
 $http.head()
 $http.jsonp()
 $http.patch()
 $http.put()

示例之一:

    $http.get("sample.php")
        .success(function(response) {
            $scope.getting = response.data; // response.data is an array
    }).error(){

        // Error callback will trigger
    });

http://www.drtuts.com/ajax-requests-angularjs/



-5

您可以使用$ .param分配数据:

 $http({
  url: "http://example.appspot.com/rest/app",
  method: "POST",
  data: $.param({"foo":"bar"})
  }).success(function(data, status, headers, config) {
   $scope.data = data;
  }).error(function(data, status, headers, config) {
   $scope.status = status;
 });

看一下:AngularJS + ASP.NET Web API跨域问题


4
请注意,$。param是jQuery,因此您需要加载jQuery才能使用它。有关使用$ http transformRequest拦截器的无jQuery示例,请参见pastebin.com/zsn9ASkM
Brian

@Brian请稍等,jQuery是否不是AngularJS的依赖项?如果不先加载jQuery,就永远不会有$ http。
jnm2

2
@ jnm2-不,jQuery不是AngularJS的依赖项。$ http指的是Angular $ http服务组件,不是jQuery的任何内容。AngularJS确实具有用于处理DOM的“ jQuery Lite”,但是它非常有限。来自Angular元素 -如果jQuery可用,则angular.element是jQuery函数的别名。如果jQuery不可用,则angular.element会委托Angular的内置jQuery子集,称为“ jQuery lite”或“ jqLit​​e”。
布赖恩
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.