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

Posted 2020-06-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用angularjs实现ajax异步请求相关的知识，希望对你有一定的参考价值。

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


}

以上是关于如何使用angularjs实现ajax异步请求的主要内容，如果未能解决你的问题，请参考以下文章

Ajax 异步请求（登录案例实现 + ajax实现二级联动）

现需要使用 jQuery 代码实现 ajax 请求，详细信息如下

Jquery 对ajax请求如何实现非异步

ajax异步请求的三种方式

Ajax提交分页请求，实现异步刷新效果

JavaScript使用Ajax实现异步通信