How to make Ajax call with $http service in AngularJs?

In AngularJS you can send AJAX requests in several different ways.Following are the ways :

1. AJAX calls via the $http service

2. JSONP calls via the $http service

3. REST type calls

The $http service:

The $http service is the easiest way to send AJAX calls.

$http functions:

  • $http.get(url, config)
  • $http.post(url, data, config)
  • $http.put(url, data, config)
  • $http.delete(url, config)
  • $http.head(url, config)

Parameter ‘data’ is send to server.The data parameter will be converted to a JSON string.

Example:

To make AJAX call you can use ng-click ,

<button ng-click=”myData.doClick(item, $event)”>Send AJAX Request</button>

write your method in <script> tag.

angular.module(“myapp”, [])
.controller(“MyController”, function($scope, $http) {
$scope.myData = {};
$scope.myData.doClick = function(item, event) {

var responsePromise = $http.get(“/angularjs-examples/json-test-data.jsp”);

responsePromise.success(function(data, status, headers, config) {
$scope.myData.fromServer = data.title;
});
responsePromise.error(function(data, status, headers, config) {
alert(“AJAX failed!”);
});
}

} );

The the $http.get() function returns a “promise” object. This promise object has a success() and an error() function. By calling these functions and pass a function to them as parameter you can control what happens when the AJAX call finishes.


ProsperaSoft offers AngularJs development solutions. You can email at info@prosperasoft.com to get in touch with ProsperaSoft AngularJs experts and consultants.

 

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>