AngularJS AJAX - $http

$http on AngularJS:n palvelu, joka lukee tietoja etäpalvelimelta.

AngularJS $http

AngularJS $http Palvelu lähettää pyynnön palvelimelle ja palauttaa vastauksen.

Example

Lähetä yksinkertainen pyyntö palvelimelle ja näytä tulos otsikossa:

<div ng-app="myApp" ng-controller="myCtrl">
<p>Tämän päivän tervetuliaesanoma on:</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>

Kokeile itse

metodia

Yllä olevassa esimerkissä käytetään $http palvelun .get Metodi.

.get-metodi on $http-palvelun nopea kutsumistapa. Seuraavat nopeat kutsumistavat ovat:

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

Edellä olevat metodit ovat $http-palvelun kutsumistapojen nopeita tapoja:

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

Kokeile itse

Yllä olevassa esimerkissä käytetään objektia parametrina $http-palvelun suorittamiseen. Tämä objekti määrittää HTTP-metodin, URL-osoitteen, toiminnon, joka suoritetaan onnistuessaan, ja toiminnon, joka suoritetaan epäonnistuessaan.

Ominaisuus

Palvelimen vastaus on objekti, jolla on seuraavat ominaisuudet:

• .config Objekti, jota käytetään pyynnön luomiseen
• .data Merkki- tai objekti, joka sisältää palvelimen vastauksen
• .headers Function to get header information
• .status Define HTTP status as a number
• .statusText Define HTTP status as a string

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

Kokeile itse

To handle errors, send to .then 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";
  });
});

Kokeile itse

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 an array.

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.Nimi + ', ' + x.Maa }}
  </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>

Kokeile itse

Sovelluskuvaus:

tämä sovellus määrittelee customersCtrl ohjaimet, joilla on scope ja http -objekti.

$http on XMLHttpRequest-objekti, käytetään ulkoisten tietojen pyytämiseen.

$http.get() Luetaan https://www.codew3c.com/angular/customers.php JSON-data.

Onnistuttuaan, ohjain luo ominaisuuden sovellusalueessa myDatajossa sisältyy palvelimen JSON-data.