如何使用angularjs實現ajax非同步請求

魔豆發表於2016-01-30
AngularJS非同步

Sample.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>form</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
    <form name="form1" id="form1" ng-controller="form1">
    賬號：<input type="text" name="username" ng-model="formData.username" required>
    <span style="color:red" ng-show="form1.formData.username.$dirty && form1.formData.username.$invalid">
        <span ng-show="form1.formData.username.$error.required">請輸入賬號</span>
    </span>
    <br />
    郵箱：<input type="text" name="email" ng-model="formData.email" required>
    <span style="color:red" ng-show="form1.formData.email.$dirty && form1.formData.email.$invalid">
        <span ng-show="form1.formData.email.$error.required">請輸入郵箱</span>
    </span>
    
    <p>
<input type="submit" ng-disabled="form1.formData.username.$dirty && form1.formData.username.$invalid || form1.formData.email.$dirty && form1.formData.email.$invalid" value="提交" ng-click="submitForm()">
</p>
    </form>
<script type="text/javascript">
   var app = angular.module('myApp',[]);
   app.controller("form1",function($scope,$http){
       $scope.formData = {};
        $scope.submitForm = function() {
            $http({
                method  : 'POST',
                url     : 'Sample.action',
                responseType : 'text',
                data    : $scope.formData
            }).success(function(data) {
                    console.log(data);

                    if (data=="success") {
                        location.replace("Main.action");
                    } else {
                        alert(data.message);
                    }
                });
        };
    });   
</script>
</body>
</html>

 

angularjs預設提交的方式是appliction/json，我在獲取提交的引數username和pwd費了一番功夫，後臺用struts2獲取username和pwd的程式碼如下

SampleAction.java

    InputStream is = arg0.getInputStream();
    String headerJson = IOUtils.toString(is);
    String headerMap = new Gson().fromJson(headerJson, new TypeToken<Map<String, String>>() {}.getType());
    String username = ObjectUtils.toString(headerMap.get("username"));
    String pwd = ObjectUtils.toString(headerMap.get("pwd"));

 

我後來是在基類做了一個改造：

public class ActionSupportExtend extends ActionSupport implements ServletRequestAware {
    
    private HttpServletRequest request;
    
    private String headerJson;
    private Map<String,String> headerMap;

    public void setServletRequest(HttpServletRequest arg0) {
        this.request = arg0;
        try {
            InputStream is = arg0.getInputStream();
            this.headerJson = IOUtils.toString(is);
            this.headerMap = new Gson().fromJson(headerJson, new TypeToken<Map<String, String>>() {}.getType());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    public String getHeaderAttribute(String key) {
        String returnValue = "";
        if(this.headerMap!=null) {
            if(this.headerMap.containsKey(key)) {
                returnValue = ObjectUtils.toString(this.headerMap.get(key));
            }
        }
        return returnValue;
    }
    

    public HttpServletRequest getRequest() {
        return request;
    }

    public void setRequest(HttpServletRequest request) {
        this.request = request;
    }

    public String getHeaderJson() {
        return headerJson;
    }

    public void setHeaderJson(String headerJson) {
        this.headerJson = headerJson;
    }

}

那麼在每次取用angularjs的ajax非同步請求的引數，就可以直接這麼寫：

public class SampleAction extends ActionSupportExtend {

    @Override
    public String execute() throws Exception {
        String username = getHeaderAttribute("username");
        String pwd = getHeaderAttribute("pwd");
        // 業務邏輯程式碼省略
        return SUCCESS;
    }


}

 

相關文章