MUKI AI Summary
jQuery AJAX 可簡單實現 CRUD，適合初學者反覆練習。API 是前後端溝通的接口，透過 JavaScript 和 AJAX 操作資料。CRUD 包含 Create、Read、Update、Delete，是前端必學技能。
留言板實作展示 CRUD，使用 jQuery 語法組合 HTML 字串，操作 DOM 顯示留言。更新留言需用表單操作，刪除留言較簡單。運用 $.ajax 呼叫 API，並用 jQuery 提供使用者回饋。未來將介紹 jQuery Template 簡化流程。...
前陣子在上前端基礎課，有教同學怎麼利用 jQuery AJAX 實現簡單的 CRUD 效果，後來覺得這對初學者來說，應該是個需要反覆思考才能融會貫通的小門檻，剛好最近也有學生對此表示不懂 😱，所以就借這篇文章簡單跟大家介紹。
我會用在課堂上的教材跟大家拆解語法，但為了避免大家練習時灌爆我的 API，所以我不會透露 API 網址，一律用變數 ajax_url 代替。
什麼是 API
用程式介面（英語：Application Programming Interface，簡稱：API），又稱為應用編程介面，就是軟體系統不同組成部分銜接的約定。
維基百科
對網站開發人員而言，API 就是前後端溝通的一個接口。後端可以透過各種方法操作資料庫裡的資料；但對前端來說，我們該怎麼操作資料呢？我們可以利用後端人員提供的 API(通常是一串網址)去操作資料，只要有了 API，我們就可以用 JavaScript 搭配 AJAX 實現 CRUD 。
如果還是霧煞煞也沒關係，接下來會用程式碼讓大家加深印象，原理神馬的，可以透過實作去了解 😊。
什麼是 CRUD
CRUD 是四個單字的簡稱，就像我們在學 CSS 時一定要會使用選擇器(selector)，而後端在學操作資料庫時，一定要先會 CRUD。
這四個單字分別意思為：
- C：Create (新建資料)
- R：Read (讀取資料)
- U：Update (更新資料)
- D：Delete (刪除資料)
實作留言板的 CRUD
接下來要跟大家分享的是，如何透過前端實作一個留言板，這個留言板要有 CRUD 的功能，就是我們常說的：新增、刪除、修改 留言。
那因為新增留言是我這期學生的期末考題，所以等他們考完試，我會再把新增留言的程式碼放上來，現在我們先來學習刪除、修改，以及顯示留言吧😋
在此先用 Bootstrap 做了一個非常簡單的留言版，你可以在 HTML 裡面看到要放留言的區塊，只有一行 <div class="result"></div> ，其他什麼都沒有。
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<form class="form">
<input type="text" id="inputName" class="form-control" placeholder="姓名" required="" autofocus="" />
<input type="email" id="inputEmail" class="form-control" placeholder="電子郵件" required="" autofocus="" />
<input type="text" id="inputUrl" class="form-control" placeholder="http://" autofocus="" />
<input type="text" id="inputTitle" class="form-control" placeholder="文章標題" required="" autofocus="" />
<textarea id="Message" style="width: 100%;" rows="10"></textarea>
<button class="btn btn-lg btn-primary btn-block" type="submit">送出</button>
</form>
</div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<h3>留言內容</h3>
<div class="result"></div>
</div>
</div>
</div>在沒有樣板輔助的情況下，我們需要透過 jQuery 語法將 HTML 的字串組出來，因此所有的留言資料、排版，都必須寫在 jQuery 檔案裡。
顯示留言(Read)
顯示留言的邏輯大概是這樣：
- 讀取網頁
- 透過 jQuery 語法 (AJAX) 得知現在要撈出該 API 裡的資料
- 使用 GET 方法撈出資料
- 將撈出來的資料，利用 jQuery 改變 DOM 之後，秀在網頁上
轉換成語法則是：
$.ajax({
url: ajax_url,
type: 'GET',
error: function(){
console.log('error');
},
success: function(e){
$(".result").append(="
'<div class="full-msg" data-id="'+ e[i]._id +'">' +
'姓名：<div class="name">'+ e[i].username +'</div>' +
'<div class="update">更新留言</div><div class="del">刪除留言</div></div>' +
'網站：<div class="url">'+ e[i].url +'</div>' +
'電子郵件：<div class="email">'+ e[i].email +'</div>' +
'標題：<div class="title">'+ e[i].title +'</div>' +
'<div class="message">'+ e[i]. message +'</div>' +
'</div>'"
);
};
});$.ajax 是 jQuery 包裝後的函式，因此他的格式都是固定的，我們只要把對應的資料寫進去，如果 url 跟 type(method) 正確，基本上資料都讀得到。
最後再透過 success 偵測資料成功被讀取後，應該要做的事情。
留言的資料非常多，所以我們要將 e 物件的所有資料顯示出來，並透過 append() 把資料一筆一筆的接在後面。
組字串時把握兩個原則：
- 當變數碰到 html 時，需要用
+串接 - 單引號用來包變數與 jQuery 語法，雙引號用來包 HTML 語法
組字串需要耐心跟細心，如果還是看不太懂他們的規則，我會建議先實作再透過開發者工具看 render 出來的 HTML 程式碼，相互對照會更加清楚他們的邏輯。
更新留言(Update)
更新留言的邏輯比較繁瑣一些，如果寫成文字大致如下：
- 點擊更新留言的按鈕
- 該篇留言會自動變成可編輯的表單，而且表單預設值是原本留言的內容
- 輸入完要更新的資料後，按下送出，表單會變回更新後的資料
- 如果按下取消，表單會變成原始資料，不會更新
因為有點複雜，所以我錄了一個 GIF 表示整個流程
轉為程式碼，也可以感受到他比 READ 還複雜許多，而且重點是這個程式碼我還沒寫完 哈哈哈 XDDDD
$(".result").on('click', '.update', function(){
var fullMsg = $(this).closest('.full-msg'),
updateID = fullMsg.data('id'),
name = fullMsg.find('.name').text(),
url = fullMsg.find('.url').text(),
email = fullMsg.find('.email').text(),
title = fullMsg.find('.title').text(),
message = fullMsg.find('.message').text();
var updateTemplate =
'<div>姓名：<input type="text" class="name" value="'+ name +'" required=""></div>' +
'<div>網站：<input type="text" class="url" value="'+ url +'"></div>' +
'<div>電子郵件：<input type="text" class="email" value="'+ email +'" required=""></div>' +
'<div>標題：<input type="text" class="title" value="'+ title +'" required=""></div>' +
'<div>內文：<textarea class="message" required="">'+ message +'</textarea></div>' +
'<div><span class="submit">送出</span><span class="cancel">取消</span></div>';
fullMsg.html(updateTemplate);
$(".submit").on('click', function(){
updateID = fullMsg.data('id');
name = fullMsg.find('.name').val();
url = fullMsg.find('.url').val();
email = fullMsg.find('.email').val();
title = fullMsg.find('.title').val();
message = fullMsg.find('.message').val();
$.ajax({
url: ajax_url + updateID,
type: 'PUT',
data: {
"title": title,
"username": name,
"message": message,
"url": url,
"email": email,
},
success: function(e) {
console.log(e)
}
})
});
$(".cancel").on('click', function(){
fullMsg.html()
})
});雖然沒有寫完，但是可以成功更新留言。只是更新後的樣式，如果要用組字串的方式來寫，會過於繁瑣，所以我後來採用 jQuery Template 實作(後面會再提到如何用 Template 改寫)。
但我們還是要簡單說一下這段程式碼，之後再把樣板加進來會比較好懂。
程式碼解釋
讓留言變成可編輯的表單，而且而且表單預設值是原本留言的內容。當我點下「更新按鈕」時，會利用這一段將作者、標題、網址 … 等資料存到變數裡。
這邊用的是 text() 方法，接下來在 updateTemplate 裡塞入表單元件，可以用 value="" 讓元件預設出現內容，所以在裡面塞入了各個變數。
當我更新完留言送出之後，會傳至 API 的實際內容。以 name 變數為例：name = fullMsg.find('.name').val();，將該表單元件的值存了起來，如果要得到元件的值，可以用 val() 方法。
最後再利用 $.ajax 加上 put 這個 type(method)，將資料一個一個的傳回去。你可以利用 sucess 印出結果，如果傳送的物件是更新後的結果，表示程式正確。
如果參考我上面寫的文字流程，成功之後應該要讓畫面回到「顯示留言」的樣子，但是如果用這種方法寫，程式碼可能會又臭又長，所以才想用 template 改寫，因此斷尾了 XDDD。但大家有興趣，也可以試著想一下該怎麼把這個功能寫出來唷 🙂
刪除留言(Delete)
相較於更新，刪除真的是簡單許多，我們的 API 設計，是只要得到該留言的 ID 值，就能透過 ID 將留言刪除。
但根據我的 HTML 結構，我是將 ID 寫在最外面，刪除留言則是放在裡面：
<div class="full-msg" data-id="12345">
<div>姓名：
<div class="name">MUKI</div>
<div class="update">更新留言</div>
<div class="del">刪除留言</div>
</div>
<div>網站：https://muki.tw/wordpress</div>
<div>電子郵件：muki@gmail.com</div>
<div>標題：我是標題</div>
<div>我是文章內容</div>
</div>所以點擊「刪除留言」之後，該如何利用 jQuery 找到這一篇文章的 ID 呢？我使用了 closest() 方法，以「刪除留言」為中心點，找到離他最近的 .full-msg。
$(".result").on('click', '.del', function(){
var fullMsg = $(this).closest('.full-msg'),
delID = fullMsg.data('id');
$.ajax({
url: ajax_url + delID,
type: 'DELETE',
error: function() {
console.log('error');
},
success: function(e){
console.log(e);
fullMsg.fadeOut(800, function(){
$(this).html('留言已刪除').fadeIn(800);
});
}
});
})如果成功刪除留言，必須要有一些簡單的回饋，讓使用者知道留言被刪除了 (就和更新留言是一樣的道理)。
只不過刪除比較簡單，我直接讓這一篇留言 fadeOut()，再秀出「留言已刪除」的字即可。
後記
以上就是簡單的 CRUD 操作，希望對大家有所幫助。雖然語法看上去有點複雜，但其實觀念只有兩個，一是利用 $.ajax 呼叫 API，二是利用 jQuery 操作 DOM，讓使用者感受到各種回饋。
有時間會再更新如何使用樣板。我會以「更新留言」為例子，將他改寫成 template 的樣式，因為我們要的功能非常單純，所以我使用的是 jQuery Template，有興趣的朋友可以先閱讀他的官方文件。
3