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;
  });
});

亲自试一试

วิธี

ตัวอย่างด้านบนใช้ $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;
  });
});

亲自试一试

应用程序说明：

该应用程序定义了 customersCtrl 控制器，具有 scope 和 http 对象。

$http 是一个 XMLHttpRequest 对象，สำหรับขอข้อมูลนอก

$http.get() จาก https://www.codew3c.com/angular/customers.php ข้อมูล JSON。

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