How to read data from server using AngularJS HTTP Get method.
AngularJS HTTP
AngularJs HTTP is a service($http) used to communicate with the server.
In this tutorial, I am going to show you :
- Convert servlet data into JSON format.
- How to read JSON file data from the server using agularJs HTTP Get method.
Convert servlet data into JSON format.
user.java
package mypack; public class user { private String name; String email; private String pass; public user(String name, String email, String pass) { this.name = name; this.email = email; this.pass = pass; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getPass() { return pass; } public void setPass(String pass) { this.pass = pass; } }
Create a Servlet
Main.java
protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, JSONException { response.setContentType("text/html;charset=UTF-8"); try (PrintWriter out = response.getWriter()) { /* TODO output your page here. You may use following sample code. */ String name = "demo Data"; String email = "demo@gmail.com"; String pass = "demo_Data"; response.setContentType("application/json"); user u = new user(name,email,pass); JSONObject obj = new JSONObject(); obj.put("serverOb", u); String json = new Gson().toJson(obj); response.getWriter().write(json); } }
Now we have data in JSON format on the server, now create an HTML file for view data.
index.html
<html ng-app="myApp"> <head> <meta charset="utf-8"> <title>Angular.js Example with mysql</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope, $http){ $http({ method : 'GET', url : 'Main' }).then(function mySucc(response){ $scope.myData = response.data.map; $scope.statuscode = response.status; }); }); </script> </head> <body ng-controller="myCtrl"> <table> <tr ng-repeat="x in myData"> <td>{{x.name+ " "+x.email+ " "+x.pass}}</td> </tr> </table> </body> </html>