如何使用angularjs实现ajax异步请求

最新推荐文章于 2021-08-05 22:56:45 发布

diejiankuai3444

最新推荐文章于 2021-08-05 22:56:45 发布

阅读量86

点赞数

文章标签： javascript json java ViewUI

原文链接：http://www.cnblogs.com/modou/p/5172332.html

版权

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


}

转载于:https://www.cnblogs.com/modou/p/5172332.html

diejiankuai3444

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用angularjs实现ajax异步请求

Sample.html<!DOCTYPE html><html ng-app="myApp"><head> <title>form</title> <script type="text/javascript" src="js/angular.min.js"></script&...
复制链接

扫一扫