AngularJS发送异步Get/Post请求方法
1、在页面中加入AngularJS并为页面绑定ng-app和ng-controller
...
2、添加必要的控件并绑定相应的事件
get:{{param}}
post:
Get Post
3、在JS脚本中发送进行Get/Post请求
get
$scope.get=function(){ $http.get("/get",{params:{param:$scope.param}}) .success(function(data,header,config,status){ console.log(data); }) .error(function(data,header,config,status){ console.log(data); }) ; }
get将参数放在URL中
$scope.get=function(){ $http.get("/get?param="+$scope.param) .success(function(data,header,config,status){ console.log(data); }) .error(function(data,header,config,status){ console.log(data); }) ; }
post
$scope.post=function(){ $http.post("/post",$scope.user) .success(function(data,header,config,status){ console.log(data); }) .error(function(data,header,config,status){ console.log(data); }) ; }
4、由Controller处理请求并返回结果
get
@RequestMapping("/get") @ResponseBody publicMapget(Stringparam){ System.out.println("param:"+param); response.put("state","success");//将数据放在Map对象中 returnresponse; }
post
@RequestMapping("/post2") @ResponseBody publicvoidpost2(@RequestBodyUseruser,HttpServletResponseresp){ //返回不同的http状态 if(user.getName()!=null&&!user.getName().equals("")){ resp.setStatus(200); } else{ resp.setStatus(300); } }
如果需要配置请求头部
$http({ method:"POST", url:"/post", data:$scope.user }).success(function(data,header,config,status){ console.log(data); }).error(function(data,header,config,status){ console.log(data); });
5、由JShttp请求的回调函数处理并执行下一步操作
HTML
Request get:
post:
Get Post