from jquery $.ajax to angular $http

问题

I have this piece of jQuery code that works fine cross origin:

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\");
    }
});

Now I\'m tring to convert this to Angular.js code without any success:

$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;
});

Any help appreciated.

回答1:

The AngularJS way of calling $http would look like:

$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;
});

or could be written even simpler using shortcut methods:

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

There are number of things to notice:

AngularJS version is more concise (especially using .post() method)
AngularJS will take care of converting JS objects into JSON string and setting headers (those are customizable)
Callback functions are named success and error respectively (also please note parameters of each callback) - Deprecated in angular v1.5
use then function instead.
More info of then usage can be found here

The above is just a quick example and some pointers, be sure to check AngularJS documentation for more: http://docs.angularjs.org/api/ng.$http

回答2:

We can implement ajax request by using http service in AngularJs, which helps to read/load data from remote server.

$http service methods are listed below,

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

One of the Example:

    $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/

回答3:

You may use this :

Download "angular-post-fix": "^0.1.0"

Then add 'httpPostFix' to your dependencies while declaring the angular module.

Ref : https://github.com/PabloDeGrote/angular-httppostfix

回答4:

you can use $.param to assign data :

 $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;
 });

look at this : AngularJS + ASP.NET Web API Cross-Domain Issue

来源：https://stackoverflow.com/questions/12131659/from-jquery-ajax-to-angular-http

标签

jquery

ajax

angularjs

cross-domain

angular-http