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>
तरीकों
ऊपर दिया गया उदाहरण सेवा की .getविधि का उपयोग करता है $http
।
.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हेडर जानकारी प्राप्त करने के लिए उपयोग करने के लिए एक फ़ंक्शन।.statusHTTP स्थिति को परिभाषित करने वाली एक संख्या।.statusTextHTTP स्थिति को परिभाषित करने वाली एक स्ट्रिंग।
उदाहरण
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, या किसी अन्य जावास्क्रिप्ट के भीतर इसका उपयोग करना आसान है।
उदाहरण: सर्वर पर हमारे पास एक फ़ाइल है जो एक JSON ऑब्जेक्ट देता है जिसमें 15 ग्राहक होते हैं, सभी को सरणी में लपेटा जाता है जिसे records.
JSON ऑब्जेक्ट को देखने के लिए यहां क्लिक करें।
उदाहरण
ng-repeatनिर्देश एक सरणी के माध्यम से पाशन के लिए एकदम सही है :
<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नियंत्रक को परिभाषित करता है, ए
$scopeऔर
$httpऑब्जेक्ट के साथ।
$httpबाहरी डेटा का अनुरोध करने के लिए XMLHttpRequest ऑब्जेक्ट है।
$http.get()https://www.w3schools.com/angular/customers.php से
JSON डेटा पढ़ता है ।
myDataसफलता पर, नियंत्रक सर्वर से JSON डेटा के साथ, दायरे में एक संपत्ति बनाता है ।