AngularJS AJAX - $http

$http er en tjeneste i AngularJS, der bruges til at læse data fra fjernservere.

AngularJS $http

AngularJS $http Tjenesten sender en anmodning til serveren og returnerer et svar.

实例

Send en simpel anmodning til serveren og vis resultatet i titlen:

<div ng-app="myApp" ng-controller="myCtrl">
<p>Dagens velkomstbesked er:</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>

Prøv det selv

metode

Det ovenstående eksempel bruger $http tjenesten .get Metode.

.get metoden er en hurtigmetode til $http-tjenesten. Der er flere hurtigmetoder:

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

Disse metoder er hurtigveje til at kalde $http-tjenesten:

实例

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

Prøv det selv

Det ovenstående eksempel bruger et objekt som parameter til at udføre $http-tjenesten. Objektet specificerer HTTP-metoden, URL, handlingen, der udføres ved succes, og handlingen, der udføres ved fejl.

Egenskab

Svaret fra serveren er et objekt med følgende egenskaber:

  • .config Objektet brugt til at generere anmodningen
  • .data Streng eller objekt, der bærer svar fra serveren
  • .headers The function used to get header information
  • .status Define the numeric value for HTTP status
  • .statusText Define the string for HTTP status

实例

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

Prøv det selv

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

实例

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

Prøv det selv

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.

实例

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>

Prøv det selv

Applikation beskrivelse:

denne applikation har defineret customersCtrl kontroller, der har scope og http objekt.

$http er en XMLHttpRequest objektet, brugt til at anmode om eksterne data.

$http.get() Læst fra https://www.codew3c.com/angular/customers.php JSON Data.

Efterfølgende opretter kontrolleren en egenskab i område myDatasom indeholder JSON-data fra serveren.