将Angular JS与JSP& Servelet的

时间:2015-10-01 06:51:15

标签: javascript java angularjs jsp servlets

我是Angular Js的新手,我正在尝试将Angular JS与JSP& Servelet的。我想写一个简单的代码,它只是从Action类中检索数据并在Index.jsp页面中显示。 这是我的代码: -

Index.jsp -

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Fetch Data</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope , $http ) {


  $scope.getDataFromServer = function() {
    alert("Check Function");
    $http({
        method : 'GET',
        url : '/AngularJsServlet'
}).success(function(data, status, headers, config) {
    alert('data----'+data);   
    $scope.person = data;
  }).error(function(data, status, headers, config) {
    alert("failure");
        // called asynchronously if an error occurs
        // or server returns response with an error status.
   });
   };
  });
</script>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="myCtrl">

 <button data-ng-click="getDataFromServer()">Fetch data from server
            </button>
             <p>First Name : {{person.firstName}}</p>
       <p>Last Name : {{person.lastName}}</p>
 </div>
  </body>
</html>

PersonData.Java(模型类) -

package com.model;

 public class PersonData {

 private String firstName;
 private String lastName;

 public String getFirstName() {
         return firstName;
 }

 public void setFirstName(String firstName) {
         this.firstName = firstName;
 }

 public String getLastName() {
         return lastName;
 }

 public void setLastName(String lastName) {
         this.lastName = lastName;
 }

 }

AngulaJsServelet.Java(Action Class) -

     package com.controller;

 import java.io.IOException;

 import javax.servlet.ServletException;
 import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.annotation.WebServlet;


import com.google.gson.Gson;
 import com.model.PersonData;

 public class AngularJsServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public AngularJsServlet() {
    super();
   }

  protected void doGet(HttpServletRequest request,
 HttpServletResponse response) throws ServletException,    IOException {
    PersonData personData = new PersonData();
    personData.setFirstName("Mohaideen");
    personData.setLastName("Jamil");

    String json = new Gson().toJson(personData);
    System.out.println("json---" + json);
    response.setContentType("application/json");
    response.getWriter().write(json);
}
}

web.xml -

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"      xmlns="http://java.sun.com/xml/ns/javaee"       xsi:schemaLocation="http://java.sun.com/xml/ns/javaee     http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
 <display-name>Practice</display-name>
  <welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

 <servlet>
<servlet-name>AngularJsServlet</servlet-name>
<servlet-class>com.controller.AngularJsServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AngularJsServlet</servlet-name>
<url-pattern>/AngularJsServlet</url-pattern>
</servlet-mapping>

</web-app>

错误 -

 GET http://localhost:8080/AngularJsServlet 404 (Not Found)

请告诉我解决此问题的方法。

谢谢。

1 个答案:

答案 0 :(得分:2)

错误很清楚。您收到的是404,因为该页面丢失了。你应该检查你的URL。应采用以下形式:

协议://主机:端口/ APPNAME /页

但你显然错过了appName。 假设web.xml中的显示名称与项目名称相同,您应该可以像这样修复它:

GET http://localhost:8080/Practice/AngularJsServlet