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