Question

请在下面找到我的代码：

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>

Servlet代码：

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是一个带有fname和lname的getter和setter方法的简单类。现在，当我在服务器上运行angularjsp.demo并单击“从服务器方法获取数据”时，没有任何反应。我不确定ng-click是否在第一时间正常工作。难道我做错了什么？

web.xml是：

<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>

编辑1：我在手动运行servlet时获得了正确的json输出。

Answer 1

您提出GET请求的方式不是Angular方式。请尝试以下代码。

  $scope.getDataFromServer = function() {
      $http.get('/AngularServlet').then(
          function (response) {
              $scope.person = response.data;
          }, 
          function (error) {
              console.log(error);
          }
      );
  };

Answer 2

是啊@shaohao lin指出使用response.data（或你的data.data}代替data。您的$ http服务返回的是Response类型的对象（包含响应代码，标题，数据和内容），您只需要data！

Answer 3

问题没有。 1

您需要将controller替换为ng-controller内的div。

<div controller="MyController"> => <div ng-controller="MyController">

问题没有。 2

您正在以错误的方式使用$http来电。尝试

$http.get('/AngularServlet') .then(function (res) { $scope.person = res.data; }, function (err) { console.log("failed"); };

问题没有。 3

由于您的json具有属性"Fname", "Lname"，因此您需要在应用内使用它们，而不是“fname”，“lname”，因为“fname”与javascript中的“Fname”不同。

<p>First Name : {{person.Fname}}</p> <p>Last Name : {{person.Lname}}</p>

Answer 4

请试一试。我试过了。似乎不是这样的问题。

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

以这种方式试试。

<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>

访问数据。

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

并使用 ng-controller 。

我试图使用angularjs从servlet获取数据到jsp。但是，ng-click似乎无效。我究竟做错了什么？

4 个答案: