AngularJS AJAX - $http

$http är en tjänst i AngularJS som används för att läsa data från en fjärrserver.

AngularJS $http

AngularJS $http Tjänsten skickar en förfrågan till servern och returnerar ett svar.

Example

Skicka en enkel förfrågan till servern och visa resultatet i titeln:

<div ng-app="myApp" ng-controller="myCtrl">
<p>Idagens välkomstmelding är:</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>

Prova själv

metod

I det föregående exemplet används $http tjänstens .get Metod.

.get-metoden är en snabbväg för $http-tjänsten. Det finns flera snabbvägar:

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

Följande metoder är snabbvägar för att anropa $http-tjänsten:

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

Prova själv

I det föregående exemplet används ett objekt som parameter för att utföra $http-tjänsten. Detta objekt specificerar HTTP-metoden, URL, åtgärden som ska utföras vid framgång och åtgärden som ska utföras vid misslyckande.

Egenskap

Svaret från servern är ett objekt med följande egenskaper:

• .config Objektet som används för att skapa en förfrågan
• .data Strängar eller objekt, som bär över svar från servern
• .headers Function to get header information
• .status Define the numeric value for HTTP status
• .statusText Define the string for 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;
  });
});

Prova själv

To handle errors, please send to .then Add a function to the method:

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

Prova själv

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>

Prova själv

Applikationens beskrivning:

den här applikationen definierar customersCtrl controller med scope och http -objekt.

$http är en XMLHttpRequest-objektet, används för att begära extern data.

$http.get() Läs från https://www.codew3c.com/angular/customers.php JSON-data.

Efter framgång, skapar kontrollern en egenskap i scopet myDataInnehåller JSON-data från servern.