Angularjs basic ajax example to display value returned from ajax server call. We’ll use controller, template and $http for this tutorial.
Angularjs Ajax GET example using $http.get()
$http.get is a shortcut for ajax call in service $http. The data returned from server gets automatically sanitised using html entities conversion. So the tags in the data literally appear as tags in this example.
<div ng-app="myApp" ng-controller='MyCtrl'>
<p>{{ajaxHtmlData}}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $http) {
$http.get("/api/get-hello-world-with-tags.php")
.then(function(response) {
$scope.ajaxHtmlData = response.data;
});
});
</script>Angularjs Ajax GET example using $http.get() with error handling
<div ng-app="myApp" ng-controller='MyCtrl'>
<p>{{ajaxHtmlData}}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $http) {
$http.get("/api/test-404.php")
.then(function(response) {
$scope.ajaxHtmlData = response.data;
}, function(response) {
// handle error
$scope.ajaxHtmlData = "Error. status: " + response.status + " statusText: " + response.statusText;
});
});
</script>Angularjs Ajax GET example with params using $http()
Here request params are getting appended to url and hence the requested url is /api/get-dump-raw.php?name1=value1.
<div ng-app="myApp" ng-controller='MyCtrl'>
<pre>{{ajaxHtmlData}}</pre>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $http) {
var req = {
method: 'GET',
url: '/api/get-dump-raw.php',
params: {name1:"value1"},
}
$http(req)
.then(function(response) {
$scope.ajaxHtmlData = response.data;
});
});
</script>Angularjs Ajax POST example using $http()
Here we need to use $httpParamSerializerJQLike to serialize params.
<div ng-app="myApp" ng-controller='MyCtrl'>
<pre>{{ajaxHtmlData}}</pre>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $http, $httpParamSerializerJQLike) {
var data = {name1:"value1"}
var req = {
method: 'POST',
url: '/api/post-dump-raw.php',
data: $httpParamSerializerJQLike(data),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
$http(req)
.then(function(response) {
$scope.ajaxHtmlData = response.data;
}, function(response) {
// handle error
$scope.ajaxHtmlData = "Error. status: " + response.status + " statusText: " + response.statusText;
});
});
</script>Angularjs Ajax POST example using $http.post()
<div ng-app="myApp" ng-controller='MyCtrl'>
<pre>{{ajaxHtmlData}}</pre>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $http, $httpParamSerializerJQLike) {
var headers = {headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}
$http.post('/api/post-dump-raw.php', $httpParamSerializerJQLike({name1:"value1"}), headers)
.then(function(response) {
$scope.ajaxHtmlData = response.data;
}, function(response) {
// handle error
$scope.ajaxHtmlData = "Error. status: " + response.status + " statusText: " + response.statusText;
});
});
</script>
