AngularJS - AJAX：初學者指南

您好，未來的編程超級巨星！我很興奮能成為您進入AngularJS和AJAX世界的導師。作為一個教了年輛計算機科學的人，我可以告訴您，掌握這些概念將為網頁開發打開一片全新的領域。那麼，我們一起來探索吧！

AngularJS - AJAX

AJAX是什麼？

在我們開始編程之前，讓我們先來了解AJAX是什麼。AJAX的全稱是Asynchronous JavaScript and XML。不要被這個花哨的名稱嚇到！它其實是一種技術，讓網頁能在不重新加載整個頁面的情況下更新內容。想像一下在線閱讀一篇長文章，並且能在滑動頁面時加載更多內容，而不需要頁面刷新。這就是AJAX的作用！

AngularJS和AJAX：絕佳拍檔

AngularJS，我們的超級英雄框架，讓AJAX的使用變得非常簡單。它提供了一個內置服務叫做$http，我們將用它來發送HTTP請求。可以把$http想像成一個信使，能從伺服器獲取數據或向其發送數據。

開始編程！

範例1：發送一個簡單的GET請求

讓我們從一個基本的範例開始。我們將創建一個簡單的應用程序，從API中獲取一個隨機笑話。

<div ng-app="myApp" ng-controller="myCtrl">
<h2>隨機笑話</h2>
<p>{{joke}}</p>
<button ng-click="getJoke()">獲取新笑話</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.getJoke = function() {
$http.get("https://official-joke-api.appspot.com/random_joke")
.then(function(response) {
$scope.joke = response.data.setup + " " + response.data.punchline;
});
};
});
</script>

讓我們來分析一下：

我們創建了一個AngularJS應用程序和控制器。
在控制器內，我們定義了一個getJoke()函數。
這個函數使用$http.get()從笑話API獲取數據。
當數據到達時，我們更新$scope.joke為設置和笑點。
在HTML中，我們顯示笑話並提供一個按鈕來獲取新的笑話。

範例2：處理錯誤

現在，讓我們通過處理潛在的錯誤來改進我們的代碼：

<div ng-app="myApp" ng-controller="myCtrl">
<h2>隨機笑話</h2>
<p ng-if="joke">{{joke}}</p>
<p ng-if="error">{{error}}</p>
<button ng-click="getJoke()">獲取新笑話</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.getJoke = function() {
$http.get("https://official-joke-api.appspot.com/random_joke")
.then(function(response) {
$scope.joke = response.data.setup + " " + response.data.punchline;
$scope.error = null;
})
.catch(function(error) {
$scope.error = "哎呀！無法獲取笑話。稍後再試。";
$scope.joke = null;
});
};
});
</script>

在這個改進版本中：

我們使用.catch()來處理可能發生的任何錯誤。
如果發生錯誤，我們顯示錯誤信息而不是笑話。
我們在HTML中使用ng-if來條件性地顯示笑話或錯誤信息。

範例3：POST請求

現在，讓我們嘗試一些更先進的東西。我們將創建一個簡單的表單來向伺服器提交數據：

<div ng-app="myApp" ng-controller="myCtrl">
<h2>提交反饋</h2>
<form ng-submit="submitFeedback()">
<input type="text" ng-model="feedback.name" placeholder="您的名字" required>
<textarea ng-model="feedback.message" placeholder="您的反饋" required></textarea>
<button type="submit">提交</button>
</form>
<p ng-if="response">{{response}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.feedback = {};
$scope.submitFeedback = function() {
$http.post("https://jsonplaceholder.typicode.com/posts", $scope.feedback)
.then(function(response) {
$scope.response = "謝謝您，" + $scope.feedback.name + "！您的反饋已經提交。";
$scope.feedback = {};
})
.catch(function(error) {
$scope.response = "哎呀！出了點問題。請稍後再試。";
});
};
});
</script>

讓我們來分析一下：

我們創建了一個表單，其中有用於名字和反饋信息的輸入框。
當表單被提交時，submitFeedback()函數被調用。
我們使用$http.post()將數據發送到伺服器（在這個例子中，是一個模擬API）。
在成功時，我們顯示一條感謝信息並清空表單。
在發生錯誤時，我們顯示一條錯誤信息。

AngularJS中的AJAX方法

這裡是一個AngularJS中的AJAX方法的便捷表格：

方法	描述
`$http.get()`	從伺服器獲取數據
`$http.post()`	向伺服器發送數據
`$http.put()`	在伺服器上更新數據
`$http.delete()`	從伺服器刪除數據
`$http.patch()`	在伺服器上部分更新數據

總結

恭喜您！您已經踏出了使用AngularJS和AJAX的世界的第一步。記住，熟能生巧。試著修改這些範例，玩轉不同的API，並不要害怕犯錯誤。這是我們學習的方式！

在我多年的教學中，我看到了學生們從完全的初學者變成了能夠构建複雜網頁應用程序的人。只要堅持不懈和充滿好奇心，您也會達到那個水平。持續編程，持續學習，最重要的是，玩得開心！

Credits: Image by storyset