AngularJS AJAX - $http

$http هو خدمة في AngularJS لقراءة البيانات من الخادم البعيد.

AngularJS $http

AngularJS $http يطلب الخدمة من الخادم ويعود بالاستجابة.

实例

إرسال طلب بسيط إلى الخادم وعرض النتيجة في العنوان:

<div ng-app="myApp" ng-controller="myCtrl">
<p>رسالة الترحيب اليومية هي:</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>

Try It Yourself

طريقة

استخدم المثال السابق $http خدمة .get طريقة.

طريقة .get هي طريقة مختصرة لخدمة $http. هناك طرق مختصرة متعددة:

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

كل هذه الطرق هي طرق مختصرة لاستدعاء خدمة $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;
  });
});

Try It Yourself

استخدم المثال السابق مشغلًا كمعامل لتنفيذ خدمة $http. يحدد هذا المشغل طريقة HTTP، URL، العمل عند نجاح الطلب، والعمل عند فشل الطلب.

خصائص

استجابة الخادم هي مشغل يحتوي على الخصائص التالية:

• .config مستخدم لإنشاء طلب
• .data فارغ أو مشغل، يحمل استجابة من الخادم
• .headers Function to get header information
• .status Define the number of HTTP status
• .statusText Define the string of 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;
  });
});

Try It Yourself

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

Try It Yourself

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 of which are 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>

Try It Yourself

Ba da gudanarwa shi ba:

ya bayyana shi customersCtrl Controller, wanda scope da http Object.

$http wani XMLHttpRequest Object, wanda ke amfani dashi don tafiyar da data na waje.

$http.get() A cikin https://www.codew3c.com/angular/customers.php ƙoƙari Data JSON.

Bayan nasara, controller yana aiki shi aikata alama a cikin scope myData, wanda ya ɗauki data JSON daga server.