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>

جرب بنفسك

الطريقة

استخدم المثال السابق $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;
  });
});

جرب بنفسك

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

الخاصية

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

  • .config الكائن المستخدم لإنشاء الطلب
  • .data السلسلة أو الكائن، تحمل الاستجابة من الخادم
  • .headers The function used to obtain 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;
  });
});

جرب بنفسك

To handle errors, please send to .then The method adds a function:

例子

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

جرب بنفسك

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>

جرب بنفسك

شرح التطبيق:

يحدد التطبيق customersCtrl مستخدمي التحكم، الذين يحتويون على نطاق و http مثل.

$http هو مثل XMLHttpRequest، لطلب البيانات الخارجية.

$http.get() قراءة من https://www.codew3c.com/angular/customers.php بيانات JSON.

بعد النجاح، يتم إنشاء خاصية في نطاق التحكم myData، التي تحتوي على بيانات JSON من الخادم.