python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
call ajax request in angularjs

How to call AJAX Request in AngularJs?

I am going to share the code sample for the ways of calling AJAX Request using $http.get(), $, $http.put(), $, $http.delete() or $http.head() methods in angularjs.

Table of Content
  1.  $http service
  2.  $http function
  3.  $http as a function
  4.  The config parameter
  5.  The success() And error() functions in angularjs Ajax
The angularjs AJAX Request manage in different types. The types re given below.
  1. AJAX call over the $http services.
  2. REST API Call over the $http services.
  3. 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.
  1. $http.get(url, config);
  2. $, data, config);
  3. $http.put(url, data, config);
  4. $http.delete(url, config);
  5. $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

  1. URL
  2. Methods
  3. parameter 
  4. 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>
<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!!!");
<body ng-app="myapp">
    <div ng-controller="MyController">
         Register Response Result from Server: {{ }} <br>
        <button ng-click="register(item, $event)">Register AJAX Request</button>

The out put look like below images


Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions