AngularJS AJAX - $http

$http ایک سروسیز ہے جو دور سروسر وٹ سے اعداد و شمار پڑھنے کے لئے استعمال کیا جاتا ہے。

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 شامل 15 مشتری را برمی‌گرداند، که همه این‌ها در یک نام records در آرایه.

برای مشاهده شیء JSON در اینجا کلیک کنید.

مثال

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>

آپ خود سنجیدار کریں

ایپلی کیشن کی وضاحت:

یہ ایپلی کیشن کستمرز کنٹرولر کنٹرولر، جو اسکوپ اور http علامت ہے۔

$http ایک XMLHttpRequest علامت، بیرونی ڈاٹا کی درخواست کے لئے استعمال کیا جاتا ہے۔

$http.get() https://www.codew3c.com/angular/customers.php سے پڑھا جاتا ہے جی ایس این لائن ڈاٹا。

موفقیت کے بعد، کنٹرولر اسکوپ میں ایک پرائیوٹ کیاجاتا ہے مای ڈاٹا، جس میں سروئیروں سے آئی جا نا جی ایس این لائن ڈاٹا شامل ہیں。