Angular Post函数没有执行的动作

Action not executed with Angular Post function

本文关键字：执行 Post 函数 Angular      更新时间：2023-09-26

我在这里使用Angular和struts，我是Angular的新手。

我有一个控制器( controller .js)，我使用post方法调用动作类(CartAction)。

我没有发现任何错误，而调用操作/StrutsAngular/ControllerAction。在controller.js中执行from post。

但是action类没有执行，甚至system.out.println也没有执行。当我在成功功能中添加警报时，我能够获得输入页面。当我给出错误的路径时，我进入了错误函数。

我不明白为什么这个动作没有被调用。

我有另一个澄清，如果在这种情况下->如果操作被调用，我可以得到响应数据

之前我已经使用了jQuery，我也提供了我使用的样例代码。如何使用AngularJS以类似的方式来实现呢?

如果有进一步的情况，请告诉我。

提前感谢你的回答。

Controller.js 

function Controller($scope,$http) {
 $http.post('/StrutsAngular/ControllerAction.do').
        success(function(data, status, headers, config) {
        // this callback will be called asynchronously
        // when the response is available
        alert("Success :: "+data);
         }).
    error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        alert("Error :: "+data);
    });

}
操作类

public class CartAction extends org.apache.struts.action.Action {

    /**
     * This is the action called from the Struts framework.
     *
     * @param mapping The ActionMapping used to select this instance.
     * @param form The optional ActionForm bean for this request.
     * @param request The HTTP Request we are processing.
     * @param response The HTTP Response we are processing.
     * @throws java.lang.Exception
     * @return
     */
    @Override
    public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        System.out.println("Entering Shop Cart Action");
    List<Object> objectList= new ArrayList<>(); 
    CartDto cartDto = new ShopingCartDto();
        cartDto.setSno(1);
        cartDto.setTitle("Title One");
    objectList.add(cartDto);

        response.setHeader("cache-control","no-cache");
        response.setContentType("text/json");
        PrintWriter out = response.getWriter();
    JSONArray jsonArray = JSONArray.fromObject(objectList);
        out.println(jsonArray.toString());
        return null;
    }

}
Jquery 

function onSubmit(){
 var url = "/StrutsAngular/ControllerAction.do";
 var formID = document.getElementById('formId');
 var forwardUrl = "/StrutsAngular/ControllerAction.do";
}
function doAjaxPost(formId,url,forwardUrl){
    var data = $("#"+formId+" :input").serializeArray();
    $.ajax({
    type: "POST",
    url: url,
    data: data,
    beforeSend: function(jqXHR, settings){
        var value = "Please Wait until progressing!";
        document.getElementById('progress').innerHTML=value;               
    },
    success: function(json){

     var message=json[0].message;

    },
    error: function(jqXHR, textStatus, errorThrown){
        if(jqXHR.status==500){
            document.getElementById('errorMessage').innerHTML=errorThrown;
        }
    },
    complete: function(jqXHR, textStatus){
        document.getElementById('progress').innerHTML="";
        if(jqXHR.status==500){
            var message = textStatus;
            document.getElementById('errorMessage').innerHTML=message;
        }
    }
});
}
<<p> JSP/strong> 
<%-- 
    Document   : Cart
    Created on : 25 Mar, 2014, 5:14:42 PM
    Author     : Arun
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html ng-app>
    <head>
        <title>Cart</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <script src="js/lib/angularjs-1.0.2/angular.js"></script>
        <script src="js/lib/controllers/controllers.js"></script>
        <link href="js/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    </head>
    <body ng-controller='Controller'>
       <div class="container">

           <form name="shoppingForm" id="formId">
                <table class="table table-striped table-hover">
                    <caption></caption>
                    <thead>
                       <tr>
                        <th>S No</th>
                        <th>Item</th>
                       </tr> 
                    </thead>
                    <tr ng-repeat='item in items | orderBy:title | filter:search' >
                         <td ><input ng-model='item.sno' class="form-control" size="3" placeholder="Quantity" maxlength="3" required></td>
                        <td ><input ng-model='item.title' class="form-control" size="10" maxlength="10" placeholder="Item Name" required></td>
                    </tr>
                </table>
                <div><button class="btn btn-lg btn-success btn-block">Submit</button></div>
           </form>
       </div>
    </body>
</html>

好吧，你有一些问题，其中大部分似乎是对Angular工作原理的误解。有一篇很棒的文章是关于jQuery背景下的"用角度思考"的:

"用angular思考"如果我有jQuery的背景?

根据你的代码给出一些细节:

首先，你需要创建一个应用(angular.module)，并给它分配ng-app属性。例如:

 var myApp = angular.module('myApp',[]); // this creates a new angular module named "myApp";
 <html ng-app="myApp"> // this will bootstrap your myApp module at the html DOM element once the domIsReady event fires

第二，你需要用Angular在模块上定义一个控制器，并传递一个函数。Angular有一个实验性的"Controller as"语法，但我建议在尝试之前先用标准的方式。

myApp.controller('myCtrl', function ($scope,$http) {
 $http.post('/StrutsAngular/ControllerAction.do').
        success(function(data, status, headers, config) {
        // this callback will be called asynchronously
        // when the response is available
        alert("Success :: "+data);
         }).
    error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        alert("Error :: "+data);
    });
});
<div ng-controller="myCtrl">

最后，传递给controller()的函数只会被调用一次，并且只在它被某处使用之后。因此，在本例中，绑定到DIV将产生一个$http。在DOM加载后立即发布。它不会做任何其他事情。我假设这只是你在测试它到达了那里。对于"真正的"代码，您可以通过$作用域公开某些函数，并从视图中调用它们:

myApp.controller('myCtrl', function ($scope,$http) {
   $scope.sendData = function() {
     $http.post(.....your other code....);
   }
});
<div ng-controller="myCtrl"><a ng-click="sendData()">send data</a></div>
相关文章：