Question

我的Web应用程序包含一个带3个按钮的简单页面，每个按钮都会启动js中定义的功能：打开（＆＃39; size＆＃39;，＆＃39; ;代码＆＃39;）（手动提供两个参数尺寸和代码）

    <!doctype html>
    <html ng-app="ui.bootstrap.demo">
      <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
        <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.2.js"></script>
        <script src="step6.js"></script>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

        <title>Step 6</title>

      </head>
      <body>


     <div ng-controller="ModalDemoCtrl">

    <button ng-click="open('lg', 1)">Click 1</button>
    <button ng-click="open('',2)">Click 2</button>
    <button ng-click="open('',3)">Click 3</button>

      <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <h3 class="modal-title">I'm a modal!</h3>
            </div>
            <div class="modal-body">

                 *** I WANT MY Json HERE ***

                Foo: <b>{{foo}}</b>

            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
                <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </script>
    </div>
      </body>
    </html>

在js中， open（）是一个用于调用模态窗口的函数（使用Bootstrap UI）模态窗口在html中有一个模板，其中定义了模态的结构以及模态体内的内容。

目标是从按钮中心图像描述中启动打开（＆＃39; lg＆＃39;，＆＃39; 1＆＃39;）功能，此处将打开模态和模态体内部将显示正确的json，将＆＃34; codice = 1＆＃34; 传递给Servlet，并在HTML正文中接收正确的json答案。这里有 my js ：

        angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

        angular.module('ui.bootstrap.demo').factory('Service', function() {
          var Service = {
            foo: 'Shared service'
          };
          return Service;
        });

        angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope,$http, $uibModal, $log, Service) {

          alert('Ctrl1');
            $scope.foo = Service.foo;
            Service.foo = 'I am from contoller 1';

            $http.get("GestioneMissioniServlet.json").then(function(response){
                alert('JSON LOAD');
                $scope.myData = response.data.missione;
                });

            vm = this;
            $http.get("missioni.json")
            .success(function (response) {
                vm.missioni = response.missioni; 


          $scope.animationsEnabled = true;

          $scope.open = function (size, codice) {

            alert('you have clicked the button:' + codice);

            Service.foo = 'il Codice:'+ codice;

            var modalInstance = $uibModal.open({
              animation: $scope.animationsEnabled,
              templateUrl: 'myModalContent.html',
              controller: 'ModalInstanceCtrl',
              size: size,
              resolve: {
                  myData: function () {
                      return $scope.myData;
                    }
              }
            });

            modalInstance.result.then(function (selectedItem) {
              $scope.selected = selectedItem;
            }, function () {
              $log.info('Modal dismissed at: ' + new Date());
            });
          };

          $scope.toggleAnimation = function () {
            $scope.animationsEnabled = !$scope.animationsEnabled;
          };

        });

        // Please note that $uibModalInstance represents a modal window (instance) dependency.
        // It is not the same as the $uibModal service used above.

        angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, myData, Service) {

            $scope.foo = Service.foo; //Print the code

            $scope.myData = myData;

          $scope.ok = function () {
            $uibModalInstance.close();//$scope.selected.item);
          };

          $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
          };
        });

我有一个工作的Servlet。它的工作原理是直接在URL中发出请求。
例如，当我在Eclipse中启动我的servlet时，URL将是：
```
http://localhost:8180/comunicazione/GestioneMissioniServlet
```

如果我添加请求并在1,2 o 3之间添加一个参数，如：

http://localhost:8180/comunicazione/GestioneMissioniServlet?codice=1

它会给我一个json文件，里面有我的json：

{ "missione": {"codice":"1","descrizione":"Missione 1 missione di terra"}}

我想要的：用AngularJS调用这个Servlet（我认为）是$ http服务。

package com.treffedin.comunicazione;

import java.io.IOException;
import java.io.PrintWriter;

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

import com.google.gson.Gson;

/**
 * Servlet implementation class GestioneMissioniServlet
 */
@WebServlet("/GestioneMissioniServlet")
public class GestioneMissioniServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public GestioneMissioniServlet() {
        super();
        // TODO Auto-generated constructor stub
    }


    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub

        Missione m = null;

        String codice = request.getParameter("codice");

        System.out.println("codice :" + codice);

        switch(codice){

        case "1":   m = new Missione(codice, "Missione 1 missione di terra");
                    break;

        case "2":   m = new Missione(codice, "Missione 2 missione di mare");
                    break;

        case "3":   m = new Missione(codice, "Missione 3 missione aerea");
                    break;
        }

        Gson gson = new Gson(); //istanza di Gson
        String json_missioni = "{ \"missione\": " + gson.toJson(m) + "}";
        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        out.println(json_missioni);

        System.out.println(m + " ciao");
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    }

}

the ng-click, launch the open() :

the servlet after request, returns the correct json:

使用Angularjs调用Servlet

0 个答案: