AngularJS Ajax $http
$http is a AngularJs service . $http is used to fetch data from an given url , the url may be on the same server or remote server . When a request is sent , the request returns a response.
For example , we have a remote file (MyTextData.txt) , the remote file contain a string "WellCome Learner". The below code fetch data from remote url and display the response data.
Ouput :
WellCome Learner
$http read json data.we have a remote file (MyTextData.txt) , the remote file contain a json string.
Example
MyTextData.txt
[
{
"name" : "User 1",
"age" : 12,
"mark" : 80
},
{
"name" : "User 2",
"age" : 15,
"mark" : 60
}
,
{
"name" : "User 3",
"age" : 15,
"mark" : 60
},
{
"name" : "User 4",
"age" : 16,
"mark" : 65
},
{
"name" : "User 5",
"age" : 17,
"mark" : 70
},
{
"name" : "User 6",
"age" : 18,
"mark" : 65
}
]
HTML Code
Output
$http response have several properties
$http is a AngularJs service . $http is used to fetch data from an given url , the url may be on the same server or remote server . When a request is sent , the request returns a response.
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller('myController',
function
($scope, $http) {
var
url = "MyTextData.txt";
$http.get(url).then(function
(response)
{
{
$scope.myData
= response.data;
});
});
</script>
<div
ng-app="myApp"
ng-controller="myController"
style="width:300px;"
>
{{myData}}
</div>
Ouput :
WellCome Learner
$http read json data.we have a remote file (MyTextData.txt) , the remote file contain a json string.
Example
MyTextData.txt
[
{
"name" : "User 1",
"age" : 12,
"mark" : 80
},
{
"name" : "User 2",
"age" : 15,
"mark" : 60
}
,
{
"name" : "User 3",
"age" : 15,
"mark" : 60
},
{
"name" : "User 4",
"age" : 16,
"mark" : 65
},
{
"name" : "User 5",
"age" : 17,
"mark" : 70
},
{
"name" : "User 6",
"age" : 18,
"mark" : 65
}
]
HTML Code
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller('myController',
function
($scope, $http) {
var
url = "MyTextData.txt";
$http.get(url).then(function
(response)
{
{
$scope.myData
= response.data;
});
});
</script>
<div
ng-app="myApp"
ng-controller="myController"
style="width:300px;"
>
<ul>
<li
ng-repeat="x
in myData">
{{
x.name + ', ' + x.age }}
</li>
</ul>
</div>
Output
- User 1, 12
- User 2, 15
- User 3, 15
- User 4, 16
- User 5, 17
- User 6, 18
$http response have several properties
config :configuration object for the request.data :response received from server.headers:function to get header information.status :Http Status code.statusText :Http Status text.
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller('myController',
function
($scope, $http) {
var
url = "MyTextData.txt";
$http.get(url).then(function
(response)
{
{
$scope.content
= response.data;
$scope.statuscode
= response.status;
$scope.statustext
= response.statusText;
});
});
</script>
<div
ng-app="myApp"
ng-controller="myController"
style="width:
300px;">
<table
border="1">
<tr>
<td>Response
Data :
</td>
<td>{{content}}
</td>
</tr>
<tr>
<td>Response
Status :
</td>
<td>{{statuscode}}
</td>
</tr>
<tr>
<td>Response
Status Descriptin :
</td>
<td>{{statustext}}
</td>
</tr>
</table>
</div>
Output :
Generally $http used for fetching data from remote location in json format.There are several method to perform type of request.
get : $http Get Request from a specific source.
delete: $http DELETE Request.
head : $http HEAD Request.
jsonp : $http
JSONP Request.post : $http
POST Request.put : $http
PUT Request. patch : $http
PATCH Request. Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
myApp = angular.module('myApp',
[]);
myApp.controller("myController",
function
($scope, $http) {
var
onSuccess = function
(data, status, headers, config)
{
$scope.data
= data;
};
var
onError = function
(data, status, headers, config)
{
$scope.error
= status;
}
$http.post('MyTextData.txt',
{ myData: 'Hello
World!'
})
.success(onSuccess)
.error(onError);
});
</script>
<div
ng-app="myApp"
ng-controller="myController"
style="width:
300px;">
<table
border="1">
<tr>
<td>Response
Data :
</td>
<td>{{content}}
</td>
</tr>
<tr>
<td>Response
Status :
</td>
<td>{{statuscode}}
</td>
</tr>
<tr>
<td>Response
Status Descriptin :
</td>
<td>{{statustext}}
</td>
</tr>
</table>
</div>
No comments:
Post a Comment