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

哈哈 阅读:146 2021-09-07 17:40:52 评论: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> 
</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; } }

标签:前端
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号