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 में इसका उपयोग करना आसान है。

उदाहरण: हमारे सर्वर पर एक फ़ाइल है, जो 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>

स्वयं को प्रयास करें

अनुप्रयोग वर्णन:

इस अनुप्रयोग द्वारा वर्णित customersCtrl कंट्रोलर स्कोप और http ऑब्जेक्ट है।

$http एक XMLHttpRequest ऑब्जेक्टविदेशी डाटा की अनुरोध के लिए उपयोग किया जाता है。

$http.get() https://www.codew3c.com/angular/customers.php से पढ़ा जाता है JSON डाटा।

सफल होने पर, कंट्रोलर अवधारणा में एक गुण बनाया जाता है myDataसेवादाता से आए JSON डाटा शामिल है。