从jquery $ .ajax到angular $ http

我有这个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; }); 

任何帮助赞赏。

Answer 1

调用$ http的AngularJS方法如下所示：

 $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对象转换为JSONstring，并设置标题（可定制）
• callback函数分别命名为success和error （也请注意每个callback的参数） – 以angular度v1.5弃用
• then使用thenfunction。
• 更多信息， then用法可以在这里find

以上只是一个简单的例子和​​一些指针，请务必查看更多的AngularJS文档： http : //docs.angularjs.org/api/ng.$http

Answer 2

我们可以通过在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/

Answer 3

你可以使用这个：

下载“angular-post-fix”：“^ 0.1.0”

然后在声明angular度模块的同时将“httpPostFix”添加到您的依赖项中。

参考： https ： //github.com/PabloDeGrote/angular-httppostfix

Answer 4

你可以使用$ .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跨域问题