AngularJS AJAX - $http

$http ni huduma ya AngularJS inayotumia kumkia data kutoka kwa mtoaji jingine.

AngularJS $http

AngularJS $http Mtoaji anafanya tafiti kwa mtoaji na anarudi maelezo.

实例

Tumia tafiti ya kutosha kwa mtoaji na tuone matokeo katika kichwa:

<div ng-app="myApp" ng-controller="myCtrl">
<p>Maelezo ya karibuni siku hii ni:</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>

Jifunze tena

makosa

Mfano wa juu una kufanya kwa $http hizi ya kufaola .get Makosa.

Makosa ya .get ni machafuko ya kufanya kazi ya $http. Kuna machafuko haya:

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

Watazamaji hawa ni machafuko ya kufanya kazi ya $http:

实例

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

Jifunze tena

Mfano wa juu una kufanya kwa kina kama thamani kufanya kazi ya $http. Kina huu anasema hatua ya HTTP, URL, hatua inayofanyika kama ni mafanikio na hatua inayofanyika kama ni kichwa cha matumizi.

Maelezo

Maelezo kutoka kwa mtoaji una maelezo yenye hatua hizo:

• .config Mwongozo wa kufaola kufanyia tafiti
• .data Mafuta ama jina au muundo, inasikia maelezo kutoka kwa mtoaji
• .headers Function to get header information
• .status Define the numeric 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;
  });
});

Jifunze tena

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

Jifunze tena

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>

Jifunze tena

Maelezo ya programu:

programu hii ina customersCtrl kiumu wa kontrol, ina scope na http kifaa.

$http ni Kifaa cha XMLHttpRequest, inatumiwa kufikia data ya nje.

$http.get() Inalewa kutoka https://www.codew3c.com/angular/customers.php Data ya JSON.

Kisha, kiumu wa kontrol hupata kina eneo la kusema myData, ikiwemo data ya JSON kutoka kwa server.