AngularJS AJAX - $http

$http is a service of AngularJS, used to read data from a remote server.

AngularJS $http

AngularJS $http The service sends a request to the server and returns the response.

Example

Send a simple request to the server and display the result in the title:

<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
    $scope.myWelcome = response.data;
  });
});
</script>

Συμπιέστε το προσωπικά σας

method

The above example uses $http service .get Method.

The .get method is a shortcut method of the $http service. There are several shortcut methods:

• .delete()
• .get()
• .head()
• .jsonp()
• .patch()
• .post()
• .put()

The above methods are shortcuts to call the $http service:

Example

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : "GET",
      url : "welcome.htm"
  }).then(function mySuccess(response) {
    $scope.myWelcome = response.data;
  }, function myError(response) {
    $scope.myWelcome = response.statusText;
  });
});

Συμπιέστε το προσωπικά σας

The above example uses an object as a parameter to execute the $http service. The object specifies the HTTP method, URL, the operation to be executed on success, and the operation to be executed on failure.

Property

The response from the server is an object with the following properties:

• .config Object used to generate the request
• .data String or object, carrying the response from the server
• .headers The function used to obtain header information
• .status The number definition of HTTP status
• .statusText The string definition of HTTP status

Example

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
    $scope.content = response.data;
    $scope.statuscode = response.status;
    $scope.statustext = response.statusText;
  });
});

Συμπιέστε το προσωπικά σας

To handle errors, please refer to .then The method adds a function:

Example

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("wrongfilename.htm")
  .then(function(response) {
    // First function handles success
    $scope.content = response.data;
  }, function(response) {
    // Second function handles error
    $scope.content = "Something went wrong";
  });
});

Συμπιέστε το προσωπικά σας

JSON

The data obtained from the response should be in JSON format.

JSON is an excellent way to transmit data and is easy to use in AngularJS or any other JavaScript.

For example: we have a file on the server that returns a JSON object containing 15 customers, all wrapped in a name called records in the array.

Please click here to view the JSON object.

Example

The ng-repeat directive is perfect for looping through an array:

<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.php").then(function(response) {}}
    $scope.myData = response.data.records;
  });
});
</script>

Συμπιέστε το προσωπικά σας

η εφαρμογή ορίζει

customersCtrl με όνομα ελεγκτής scope και http αντικείμενο.

$http είναι Όνειροξένητη Απαιτηση XMLHttpRequestγια να ζητηθούν εξωτερικά δεδομένα.

$http.get() Αναγνωρίζεται από https://www.codew3c.com/angular/customers.php Δεδομένα JSON。

Με επιτυχία, ο ελεγκτής δημιουργεί μια ιδιότητα στον χώρο εφαρμογής myData，περιλαμβανομένων των δεδομένων JSON από τον διακομιστή.