AngularJS AJAX - $http
$http သည် အဝေးထိန်းဆာဗာများမှ ဒေတာဖတ်ရှုခြင်းအတွက် AngularJS ဝန်ဆောင်မှုတစ်ခုဖြစ်သည်။
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 သို့မဟုတ် အခြားသော JavaScript တို့တွင် အသုံးပြုရလွယ်ကူသည်။
ဥပမာ- ဆာဗာတွင် ကျွန်ုပ်တို့တွင် သုံးစွဲသူ 15 ဦးပါရှိသော JSON အရာဝတ္ထုကို ပြန်ပေးသည့် ဖိုင်တစ်ခုရှိပြီး၊ အားလုံးသည် records.
JSON အရာဝတ္ထုကို ကြည့်ရှုရန် ဤနေရာကို နှိပ်ပါ။
ဥပမာ
ng-repeatညွှန်ကြားချက်သည် 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>
လျှောက်လွှာကိုရှင်းပြခဲ့သည်
အပလီကေးရှင်းသည် customersCtrlcontroller ကို a
$scopeနှင့်
$httpobject ဖြင့် သတ်မှတ်သည်။
$httpပြင်ပဒေတာကို တောင်းဆိုရန်အတွက် XMLHttpRequest object တစ်ခုဖြစ်သည် ။
$http.get()https://www.w3schools.com/angular/customers.php မှ
JSON ဒေတာ ကို ဖတ်သည် ။
myDataအောင်မြင်မှုတွင်၊ ထိန်းချုပ်သူ သည် ဆာဗာမှ JSON ဒေတာဖြင့် နယ်ပယ်အတွင်း ပိုင်ဆိုင်မှုတစ်ခုကို ဖန်တီးသည် ။