<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>接口测试</title>
<!-- Bootstrap -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="keepController">
<form name="testForm" novalidate>
<div id="responseMsg" class="testMode" >
<div>
<h3>认证接口：</h3>
<textarea required class="form-control" rows="3" id="authData" name="authData" ng-model="authData"></textarea>
<span style="color:red" ng-show="testForm.authData.$dirty && testForm.authData.$invalid">
<span ng-show="testForm.authData.$error.required">认证接口必填</span>
</span>
</div>
<div>
<h3>数据请求接口：</h3>
<textarea required class="form-control" rows="3" id="reqData" name="reqData" ng-model="reqData"></textarea>
<span style="color:red" ng-show="testForm.reqData.$dirty && testForm.reqData.$invalid">
<span ng-show="testForm.reqData.$error.required">数据请求接口必填</span>
</span>
</div>
<div style="text-align: right;margin-right: 20px;margin-top:10px;">
<button class="btn btn-default" role="button" ng-click="keepTest()"
ng-disabled="testForm.authData.$invalid ||
testForm.reqData.$invalid"
>连接测试</button>
</div>
<div>{{ansInfo}}</div>
</div>
</form>
</div>
<script src="js/angularJS/angular.min.js"></script>
<script type="text/javascript">
//1.全局作用域的例子
/* function keepController($scope,$http) {
$scope.keepTest= function(){
var pData = {authData:$scope.authData,reqData:$scope.reqData};
$http({method:‘POST‘,url:‘testKeep‘,params:pData}).
success(function(response) {
$scope.ansInfo = response.a;});
};
} */
//2.模块化控制器
/*var app = angular.module(‘MyApp‘,[]);
app.controller(‘keepController‘,function($scope,$http){
$scope.keepTest= function(){
var pData = {authData:$scope.authData,reqData:$scope.reqData};
$http({method:‘POST‘,url:‘testKeep‘,params:pData}).
success(function(response) {
$scope.ansInfo=response.a;});
}
}); */
//3.请求服务抽出来的控制器
angular.module(‘myapp.services‘,[]).factory(‘testService‘,function($http){
var runRequest = function(pData){
return $http({method:‘POST‘,url:‘testKeep‘,params:pData});
};
return {
events:function(pData){
return runRequest(pData);
}
};
});
angular.module(‘MyApp‘,[‘myapp.services‘]).
controller(‘keepController‘,function($scope,testService){
$scope.keepTest= function(){
var pData = {authData:$scope.authData,reqData:$scope.reqData};
testService.events(pData).success(function(response){
$scope.ansInfo=response.a;
});
};
});
</script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</body>
</html>
?
@RequestMapping(value = "testKeep", produces = "text/plain;charset=UTF-8")
@ResponseBody
public String testKeep(HttpServletRequest request,
HttpServletResponse response) {
System.out.println(request.getParameter("authData"));
System.out.println(request.getParameter("reqData"));
JSONObject ja = new JSONObject();
ja.put("a", "aaa");
ja.put("b", "bbb");
ja.put("c", "ccc");
System.out.println("test:"+ja.toString());
return ja.toString();
}
?原文：http://zhangzhaoaaa.iteye.com/blog/2185376