I am going to share the code sample for the ways of calling AJAX Request using $http.get(), $http.post(), $http.put(), $http.post(), $http.delete() or $http.head() methods in
angularjs.
Table of Content
The config parameter handle the parameters that are
The success() function handle the success data and the error() function handle the error response that is show in the below example.
Table of Content
- $http service
- $http function
- $http as a function
- The config parameter
- The success() And error() functions in angularjs Ajax
The angularjs AJAX Request manage in different types. The types re given below.
- AJAX call over the $http services.
- REST API Call over the $http services.
- JSON Call over the $http services.
The $http services is a way of sending AJAX request on the
web servers. The $http and $scope both are managed by the controller
function.
The functions over the $http service that is
called $http function. The function list as given below.
- $http.get(url, config);
- $http.post(url, data, config);
- $http.put(url, data, config);
- $http.delete(url, config);
- $http.head(url, config);
Here we can also used the $http services as function. Its
look like below code.
{{
var httpAsFunction = $http(config);
}}
The config parameter handle the parameters that are
- URL
- Methods
- parameter
- header etc.
The success() function handle the success data and the error() function handle the error response that is show in the below example.
The example code as given below.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script type="text/javascript">
angular.module("myapp", [])
.controller("MyController", function ($scope, $http) {
$scope.result = {};
$scope.register = function (item, event) {
var response = $http.get("url/angularjs-ajaxcall/json-data");
response.success(function (data, status,
headers, config) {
$scope.result.rltdata =
data.title;
});
response.error(function (data, status,
headers, config) {
alert("Faild to call AJAX Request!!!");
});
}
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
Register Response Result from Server: {{
rltdata.data }} <br>
<button ng-click="register(item,
$event)">Register AJAX Request</button>
</div>
</body>
</html>
The out put look like below images