AngularJS AJAX - $http

$http ਹੈ ਇੱਕ ਸੇਵਾ ਜੋ ਰਿਮੋਟ ਸਰਵਰ ਤੋਂ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

AngularJS $http

AngularJS $http ਸੇਵਾ ਸਰਵਰ ਨੂੰ ਬੇਨਤੀ ਭੇਜਦੀ ਹੈ ਅਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਲੈਂਦੀ ਹੈ。

实例

ਸਰਵਰ ਨੂੰ ਇੱਕ ਸਰਲ ਬੇਨਤੀ ਭੇਜੋ ਅਤੇ ਸ਼ੀਰਸ਼ਕ ਵਿੱਚ ਨਤੀਜੇ ਦਿਖਾਓ:

<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome message is:</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 میں استعمال کیا جاسکتا ہے。

مثال: سرور پر ایک فائل ہے جو 15 کسٹمر کا JSON آئیٹم واپس دیتا ہے، سارے وہ نام سے 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 ایک ایکس ایمل آر کیج، بیرونی ڈاٹا کی درخواست کے لئے استعمال ہوتا ہے。

$http.get() https://www.codew3c.com/angular/customers.php سے پڑھا گیا ایک جی این ویلو。

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