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 توابعی برای دریافت اطلاعات سربرگ
• .status تعریف عددی برای وضعیت HTTP
• .statusText تعریف رشته‌ای برای وضعیت HTTP

مثال

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

آزمایش کنید

برای مدیریت خطا، به .then یک تابع به روش اضافه کنید:

مثال

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

داده‌هایی که از پاسخ دریافت می‌شود باید در فرمت JSON باشد.

JSON بهترین روش برای انتقال داده‌ها است و به راحتی در AngularJS یا هر JavaScript دیگر استفاده می‌شود.

مثال: ما در سرور یک فایل داریم که یک JSON object شامل 15 مشتری را برمی‌گرداند، همه این‌ها در یک نام‌گذاری به نام records در آرایه.

لطفاً روی اینجا کلیک کنید تا 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 از سرور است.