將原來 jQuery 教材中的作業資料夾裡面的所有檔案,複製一份放到 assignment_ajax
資料夾內,然後開始進行以下的作業。
在 index.js
檔案中,第一行先放入以下:
var user_id = 1; // 自己的座號
初始載入時,顯示 loading icon:
$("ul.task_list").html('<li style="text-align: center;"><i class="fas fa-spinner fa-spin fa-3x"></i></li>');
API: 取得待辦事項列表
GET
https://notes.webmix.cc/ajax/teach/api/list.php
取得待辦事清的清單列表。
Path Parameters
[
{
"item_id": "abc",
"name":"dddda",
"star":0,
"sort":1
},
{
"item_id": "abc123",
"name":"dddd",
"star":0,
"sort":1
}
]
API: 新增待辦事項
POST
https://notes.webmix.cc/ajax/teach/api/add.php
輸入欲新增的待辦事項。
Request Body
{
"item_id": "abc123",
"name":"dddd",
"star":0,
"sort":1
}
新增資料與顯示資料結果:
API: 移除單筆待辦事項
DELETE
https://notes.webmix.cc/ajax/teach/api/delete_item.php
移除單筆待辦事項
Request Body
/* 刪除待辦事項成功 */
{
"msg":"delete success",
"data":[
{
"item_id":529,
"name":"as",
"star":0,"sort":1
},
{
"item_id":376,
"name":"d1",
"star":0,"sort":1
}
]
}
/* 待辦事項找不到 */
{
msg: "item id not found",
}
/* 待辦事項未定義 */
{
msg: "item id not defined"
}
API: 清空所有待辦事項
DELETE
https://notes.webmix.cc/ajax/teach/api/delete_all.php
清空所有待辦事項。
Request Body
{
"msg": "delete all success",
"data": []
}
星號更新的注意事項
加上以下的 css:
div.star_block{
display: inline-block;
position: relative;
}
div.temp_loading{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: hsla(0, 0%, 0%, .1);
text-align: center;
z-index: 2;
color: white;
}
div.temp_loading > span{
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
ajax 中的 beforeSend 函式(留意以下原始碼是用 that):
$(that).closest("div.star_block").append('<div class="temp_loading"><span><i class="fas fa-spinner fa-spin"></i></span></div>');
ajax 中的 complete 函式(留意以下原始碼是用 that):
$(that).closest("div.star_block").find("div.temp_loading").remove();
API: 更新待辦事項的星號
PATCH
https://notes.webmix.cc/ajax/teach/api/patch_star.php
更新待辦事項的星號。
Request Body
// 更新成功
{
"msg": "star update success",
"item_id": "893",
"star": 2
}
// 未使用正確的 PATCH
{
"msg": "denied"
}
// user_id 未傳送
{
"msg": "user_id not defined"
}
// 未傳送 star 或 傳送小於 0
{
"msg": "star not defined"
}
// item_id 未傳送
{
"msg": "item_id not defined"
}
// item_id 找不到
{
"msg": "item_id not found"
}
撰寫排序的注意事項
在 css 檔的 article.task_container
樣式,加上一行:position: relative;
。
beforeSend 函式:
$("article.task_container").append("<div class='temp_loading'><span><i class='fas fa-spinner fa-spin fa-5x'></i></span></div>");
complete 函式:
$("article.task_container").children("div.temp_loading").remove();
API: 更新待辦事項的排序
PATCH
https://notes.webmix.cc/ajax/teach/api/patch_sort.php
Request Body
{
"msg":"update sort success",
"data":[
{
"item_id": 878,
"name": "測試的待辦事項",
"star": 3,
"sort": 1
},
{
"item_id": 722,
"name": "a3",
"star": 0,
"sort": 2
},
{
"item_id": 537,
"name": "a1",
"star": 0,
"sort": 3
}
]
}
API: 更新單筆待辦事項當中,所用者所打的字。
PUT
https://notes.webmix.cc/ajax/teach/api/update_item.php
更新的資料:使用者所打的字。
Request Body
{
"msg": "item update success",
"item_id": "899",
"name": "測試的文字"
}
完成示意
繳交方式及繳交期限
先將 assignment_ajax
資料夾壓成壓縮檔,然後透過以下網址繳交:
https://java.tibame.com/
繳交期限:
0/() 晚上 12 點之前。