从jquery$.ajax到angular$HTTP

Question

我有一段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

您可以使用以下内容：

下载“Angular-Post-Fix”：“^0.1.0”

然后在声明angular模块时向依赖项添加“HTTP后缀”。

参考：https://github.com/pablodegrote/angular-httppostfix

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

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字符串并设置头（这些是可自定义的）
• 回调函数分别命名为成功和错误（还请注意每个回调的参数）-在angular V1.5中不推荐使用
• 改用then函数。
• 有关then用法的详细信息，可在此处找到

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