欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

AngularJS发送异步Get/Post请求方法

程序员文章站 2022-03-20 15:09:05
1、在页面中加入angularjs并为页面绑定ng-app 和 ng-controller

1、在页面中加入angularjs并为页面绑定ng-app 和 ng-controller

<body ng-app="myapp" ng-controller="myctrl" >
...
<script src="js/angular.min.js"></script>
<script src="js/sbt.js"></script>

2、添加必要的控件并绑定相应的事件

 get:<input type="text" ng-model="param">{{param}} <br>
 post: <input type="text" ng-model="user.name"><input type="text" ng-model="user.password"><br>
 <button ng-click="get()">get</button>
 <button ng-click="post()">post</button>

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
 public map<string,string> get(string param) {
  system.out.println("param："+param);
  response.put("state", "success");//将数据放在map对象中
  return response;
 }

post

 @requestmapping("/post2")
 @responsebody
 public void post2(@requestbody user user, httpservletresponse resp) {
  //返回不同的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、由js http请求的回调函数处理并执行下一步操作

html

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>request</title>
</head>

<body ng-app="myapp" ng-controller="myctrl" >
get:<input type="text" ng-model="param"><br>
post: <input type="text" ng-model="user.name"><input type="text" ng-model="user.password"><br>
 <button ng-click="get()">get</button>
 <button ng-click="post()">post</button>
</body>
<script src="js/angular.min.js"></script>
<script src="js/sbt.js"></script>
</html>

sbt.js

var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope, $http) {

 $scope.get = function () {
  $http.get("/get", {params: {param: $scope.param}})
   .success(function (data, header, config, status) {
    console.log(data);
   })
   .error(function (response) {
    console.log(response);
   })
  ;
 }

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

以上这篇angularjs发送异步get/post请求方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇： javascript xml xsl取值及数据修改第2/2页

下一篇： CKEditor 取消转义的两种方法

推荐阅读