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ฟังก์ชันที่ใช้รับข้อมูลส่วนหัว.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.
ตัวอย่าง
คำ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ตัวควบคุมด้วย a
$scopeและ
$httpวัตถุ
$httpเป็นวัตถุ XMLHttpRequestสำหรับการขอข้อมูลภายนอก
$http.get()อ่านข้อมูลJSONจาก
https://www.w3schools.com/angular/customers.php
เมื่อสำเร็จ ผู้ควบคุมจะสร้างคุณสมบัติmyDataในขอบเขต โดยมีข้อมูล JSON จากเซิร์ฟเวอร์