説明
使用外部(後台)資料,不用自己建構資料模型。
步驟
- 使用ajax串接後台api
- 印出資料,success:成功
- 將function内資料外接
- 之後使用tododata變數,可以在外部編輯這筆資料
範例
div#notify
// 3 將function内資料外接
var tododata;
// 1 使用ajax串接後台api
$.ajax(
{
url: "https://goo.gl/PBvlqI",
// 2 印出資料,success:成功
success: function(res){
$("#notify").text(res);
tododata=res;
}
}
);
// 4 之後使用tododata變數,可以在外部編輯這筆資料
Display
(按下載入不安全的代碼後顯示)
應用:JSON與ajax結合
- 製作html清單模板
- 定義外部api
- ajax串接,ajax裡面是物件形式
- 連接url變數
- 成功:傳回參數→結果→外接
- JSON.parse(文字)→物件結構
- 製作迴圈,準備列印資料
- 迴圈下的api資料
- 代換變數
- 載入代換後的新模板
- 建立打勾項目
- 取代class
- 定義打勾class
.todolist
h3 我的代辦清單
hr
ul#listitem
//li(class="{{class}}") {{num}}. {{name}} {{date}}
*
font-family: 微軟正黑體
body
padding: 30px
.todolist
display: inline-block
padding: 20px
border: solid 3px
& ul
padding: 0px
& li
list-style: none
width: 300px
padding: 5px
.done
&:before
content: " ✔ "
color: red
// 1 製作html清單模板
var html="<li class='{{class}}'>{{num}}.{{name}} {{date}}</li>";
// 2 定義外部api
var api="https://goo.gl/PBvlqI";
// 3.3 定義外接資料
var data;
// 3 ajax串接,ajax裡面是物件形式
$.ajax({
// 3.1 連接url變數
url: api,
// 3.2 成功:傳回參數→結果→外接
success: function(res){
// 3.3 JSON.parse(文字)→物件結構
// console.log(JSON.parse(res));
data=JSON.parse(res);
// 4 製作迴圈,準備列印資料
for(i=0;i<data.length;i++){
// 4.1 迴圈下的api資料
var item=data[i]
// 5.2 定義打勾class
// if簡寫(檢査項目==true)?"是的話傳値":"否的話傳値"
var now_class=(item.done)==true?"done":"";
// 4.2 代換變數
var new_html=
html.replace("{{num}}",i+1)
.replace("{{name}}",item.name)
.replace("{{date}}",item.date)
// 5 建立打勾項目
// 5.1 取代class
.replace("{{class}}",now_class);
// 4.3 載入代換後的新模板
$("#listitem").append(new_html);
}
}
});
Display