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

Posted

tags:

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

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

 

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

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

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

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

ajax异步请求的三种方式

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

JavaScript使用Ajax实现异步通信