POSTING DATA INTO DATABASE USING SERVLET 

AND $HTTP METHOD IN ANGULAR JS


We all know that we cannot directly connect to the database through Angular JS as per the AngularJS code definition.

So in order to solve that issue we have a $http method in Angular JS which solves the above problem of dealing with the database through Angular JS.

Lets go through the syntax of the $http method in Angular JS.
The $http method is a function which accepts a single argument which can be called a configuration object and this object is used to generate a http request and it returns a promise as an output.


Syntax of $http method:

$http({
method:’’,
url:’’,
params:{
‘key1’:value1,
‘key2’:value2,
‘key3’:value3,
.
.
.
.
}
})
.then(function(response){
alert(response.status);
alert(success);
}.function(response){
alert(response.status);
alert(response.statusText);
alert(un success);
});
}):

Now let us get to know the terminology used in the $http method.

$http is the name of the method and it is the indicator that the method service starts from here.

This $http method basically has 3 parameters.

1)Method: Method means what type of action are we going to do with respect to the data using this service.

The common methods we use are POST, GET, DELETE, UPDATE.

2)URL: URL is the url of the backend script which we are using to connect to the database.

We can use servlets, spring framework or any other backend framework for the same.

The URL must be enclose in quotes.

3)Params: Params/parameters are the field names of the table where you intend to post or get the data from. They are generally referred as keys and the data which you post for the keys are referred as values. These key-value pairs form and object which is returned from the server in the form of a response.
The data which we give to the $http method is sent as a request to the server and we get the data in the form of an JSON data which is the response which we get from the server.

.then (function(response): This function is called when the above mentioned parameters are all correct and the request is sent to the server.

Response.status is the status which the server returns for a successful interaction with the data.

In AngularJS generally the range of response status for a successful request in in between 200-299 and the default status is '0' and any value less than the above mentioned value will be rounded to 0 thereby resulting in an unsuccessful transaction.

.function(response):This function is called when there is an issue with the above mentioned parameters.

The un success response will arise when the request to the server is not done successfully or if the servlet’s response status is not set in between 200-299.

The $http method can be enclosed in a function inside a controller which can be executed on the click of a button.

The ng-click directive on an element from the view triggers a function in the controller where the $http service method is being called.

Example Program:

<html ng-app=”SampleApp”>
<head>
<title>SampleApp</title>
</head>
<body>
<div class="container-fluid" >
<div class="row" >
<div class="col-xs-2 col-sm-2 col-md-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount" name="amount" ng-model="cash" value="cash" autofocus required/>
</div>
</div>
</div>
<br>
<div class="input-group button" >
<input style="text-align:center" type="button" class="btn btn-primary form-control" value="Add Money" ng-click="sav()">
</div>
<br>
</div>
</body>
</html>

<script>
SampleApp.controller(‘SampCtrl’,function($scope,$http,$localStorage){
$scope.give=function(){
$localStorage.cash=$scope.cash;
$localStorage.typ=$scope.typ;
}
$http({// POST Service for adding money
url: 'http:// servlet url',
method: "POST"
params: {'EmailID':$scope.Email,
'Amount':$scope.cash,
      'Currency':'Dollar',
      'Tnx_Type':$scope.typ,
      'Tnx_By':'Self'
    }
  })
.then(function(response) {
  alert(response.status);
      alert('success');
    }, function(response) {
      alert(response.status);
      alert(response.statusText);
      alert('un success');
    });
};
</script>

In the above program we had called a controller through an ng-click function on an element which calls the $http method part which is present in the function within the controller.

Please find the below screen shots on how the screens appear like:

1)There will be a single text box in the view page where you need to enter some amount.
















2)Add some amount from the keyboard and click on the submit button.























3)After clicking on the submit button you will be redirected to another page which appears as the below:


























4)Select one of the radio buttons from the available options in the list and click on the submit button.


















5)Once you select the radio button and click on the submit button click on F12 button in the key board and click on the Network tab in the console of the screen.

If the data is successfully inserted into the database we will get a status of 200 from the server which indicates the successful transaction.


















6)Along with the response status of 200 we will get the response text as success for a successful transaction if the data is successfully inserted into the database.

















7)Now when we click on the Network tab we can check the services that had been called from the above page.













8) If we click on the service that we see on the page we can see the data that is being sent to the server in the form of a request and the data which we received from the server in the form of response which is generally a JSON object.














9)After we see the response, we can check in the database to see whether the values have been inserted into the particular table.


In this way we can use the $http method to POST the data from the front end to back end using AngularJS and Servlets.


Thanks,
Venkata Shanmukha Korada
venkat.shanmukh0015@gmail.com
Mouritech Pvt Ltd.
www.mouritech.com

Comments

Post a Comment