Sai Krishna Sai Krishna - 4 months ago 59
Java Question

I am trying to fetch data from a servlet into a jsp using angularjs. However, the ng-click seems to be not working. What am I doing wrong?

Please find my code below :

angulardemo.jsp

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>AJAX with Servlets using AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', '$http', function($scope, $http) {
$scope.getDataFromServer = function() {
$http.get('AngularServlet',function(data) {
$scope.person=data;
},function(failure){
console.log("failed");
})
};

}]);
</script>
</head>
<body>
<div ng-app="myApp">
<div controller="MyController">
<button ng-click="getDataFromServer()">Fetch data from server</button>
<p>First Name : {{person.fname}}</p>
<p>Last Name : {{person.lname}}</p>
</div>
</div>
</body>
</html>


The Servlet code :

package com.controller;
public class AngularServlet extends HttpServlet
{
private static final long serialVersionUID = 1L;

public AngularServlet()
{

}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
//JSONObject obj = new JSONObject();

try {

PersonalData personData = new PersonalData();
personData.setFname("Fname");
personData.setLname("Lname");

String json = new Gson().toJson(personData);
response.setContentType("application/json");
response.getWriter().write(json);
}
catch (Exception e) {
e.printStackTrace();
}
}
}


PersonalData is a simple class with the getter and setter methods for fname and lname. Now when I run the angularjsp.demo on the server and click on Get Data From Server Method , nothing happens. I am not sure if the ng-click is working properly in the first place. Am I doing something wrong ?

The web.xml is :

<web-app>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>AngularServlet</servlet-name>
<servlet-class>com.controller.AngularServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AngularServlet</servlet-name>
<url-pattern>/AngularServlet</url-pattern>
</servlet-mapping>
</web-app>


Edit 1: I am getting the proper json output on running the servlet manually.

Answer

Please try it. I have tried. Doesn't seem a problem like this.

public class PersonalData {
  private String fName;
  private String lName;
//setters getters...
}

Try it that way.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js">      </script>
<script>
 angular.module('myApp', [])
 .controller('MyController', ['$scope', '$http', function($scope, $http) {
  $scope.getDataFromServer = function() {
    $http.get("/AngularServlet").success(function(data){
         $scope.person = data;
    });
  };
 }]);
</script>

Access to the data.

<p>First Name : {{person.fName}}</p>
<p>Last Name : {{person.lName}}</p>

And use ng-controller.