Of Stack

angularJS $http: Example of Interacting with the Server

  • 2021-08-05 08:00:17
  • OfStack

Interacting with a remote HTTP server in angularJS uses a very critical service-$http.

$http is a core service in angular that uses the browser's xmlhttprequest or via JSONP objects to interact with remote HTTP servers. The usage of $http is the same as that of $. ajax provided by jquery, and it supports various method requests, such as get, post, put, delete and so on. The various requests for $http are closer to the rest style. You can get the $http object in controller in the same way as $scope, e. g. function controller ($scope, $http) {}

The following instructions for using the $http service are called as follows: 



$http(config).success(function(data,status,headers,config){}).error(function(data,status,headers,config){});

1. config is an JSON object, which mainly contains url, data, method, etc. of the request, such as {url: "login. do", method: "post", data: {name: "12346", pwd: "123"}}.

method {String} Request Mode e. g. "GET". "POST" url {String} Requested URL address params {key, value} request parameters that will be spliced on URL into? key = value data {key, value} data will be sent to the server in a request If cache {boolean} is true, use the default $http cache when http GET requests, otherwise use an instance of $cacheFactory timeout {number} Set timeout

2. success is the callback function after the request is successful, and error is the callback function after the request is failed. Here, the four parameters returned are mainly explained.

data responder status corresponding status value headers to get the function of getter The config object in the config request, as in point 1 above

In order to facilitate everyone to interact with HTTP server, angularJS provides methods under various request modes.

$http. put/post (url, data, config) url, name required, config optional

$http. get/delete/jsonp/head (url, confid) url required, config optional

Parameter 1 of url, data, config and $http,

Below is an simple demo that shows how to use $http () and $http. post (). 


<!DOCTYPE HTML>
<html lang="zh-cn" >
<head>
  <meta charset="UTF-8">
  <title>CSSClasses</title>
  <script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
  function ctrl($http,$scope){
    $scope.login = function(user){
      $http.post("login.do",user).success(function(data, status, headers, config){
        alert("success");
      }).error(function(data, status, headers, config){
        alert("error");
      })
    }
    $scope.login1 = function(user){
      $http({url:"login.do",data:user}).success(function(data, status, headers, config){
        alert("success");
      }).error(function(data, status, headers, config){
        alert("error");
      })
    }
  }
</script>
</head>
<body ng-app>
  <div ng-controller="ctrl">
    <form name="loginFm">
      Name:<input ng-model="user.name" />
      pwd: <input ng-model="user.pwd" />
      <input type="button" value="login" ng-click="login(user)" />
      <input type="button" value="login1" ng-click="login1(user)" />
    </form>
  </div>

</body>
</html>
Related articles: