from jquery $.ajax to angular $http
141,958
Solution 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
anderror
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
Solution 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/
Comments
-
Endless almost 4 years
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.
-
Endless almost 12 yearsGood to know! however i don't thing its client error i'm dealing with, Angular change the Request method to OPTIONS. think i have to do some server side stuff to support it
-
pkozlowski.opensource almost 12 yearsYes, I guess you need to sort out server-side problems first. Then you will be able to enjoy full power of angular's $http on the client side. Probably you see an additional OPTIONS request since AngularJS is sending more / different headers as compared to jQuery.
-
xander27 over 11 yearsNOTE: in get "params:" but not "data:" see stackoverflow.com/questions/13760070/…
-
pkozlowski.opensource over 11 years
params
anddata
are 2 different things: params end up in the URL (query string) while data - in request body (only for request types that actually can have body). -
notbrain about 10 yearsJust a note that $.param is jQuery, so you'll need jQuery loaded to use it. For a jQuery-free example using $http transformRequest interceptor, see pastebin.com/zsn9ASkM
-
Andrew Luhring about 9 years"Angular change the Request method to OPTIONS. think i have to do some server side stuff to support it " I'm having the same problem, what does angular add that jquery doesnt?
-
jnm2 about 9 years@Brian Wait a minute, isn't jQuery a dependency of AngularJS? You'll never have $http without jQuery first being loaded.
-
notbrain about 9 years@jnm2 - no, jQuery is not a dependency of AngularJS. $http refers to the Angular $http service component, not anything from jQuery. AngularJS does have a "jQuery Lite" available for manipulating the DOM, but it's very limited. From Angular element - If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite."