ล่าสุดการพัฒนาเว็บบทเรียน
 

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 บริการ

วิธีการรับการตอบสนองเป็นวิธีลัดในการให้บริการ 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 mySucces(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 หรือจาวาสคริปต์อื่น ๆ

ตัวอย่าง: บนเซิร์ฟเวอร์ที่เรามีแฟ้มที่ส่งกลับวัตถุ JSON มีลูกค้า 15 ห่อทั้งหมดในอาร์เรย์เรียกว่า records

ลองดูที่วัตถุ JSON

×

customers.php 

 {{ข้อมูล | 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() อ่านข้อมูล JSON จาก http://www.w3ii.com/angular/customers.php

เกี่ยวกับความสำเร็จของตัวควบคุมจะสร้างสถานที่ให้บริการ myData ในขอบเขตที่มี JSON ข้อมูลจากเซิร์ฟเวอร์


❮ก่อนหน้า ถัดไปบท❯