Jquery ajax - 實作導入資料代辦清單

My tip

如果看不到 codepen playground，請重新整理頁面

See the Pen 你的 CodePen 標題 by Retsnom on CodePen.

---

index.html

<h2>JSON與ajax的結合</h2>
<h4>JSON.parse(文字)->物件結構</h4>
<div class="todolist">
  <h3>我的代辦清單</h3>
  <hr />
  <ul id="listitem"></ul>
</div>

style.sass

*
  font-family: 微軟正黑體
  // border: solid 1px

body
  padding: 30px

.todolist
  display: inline-block
  padding: 20px
  border: solid 3px black

  & ul
    padding: 0px

  & li
    list-style: none
    width: 300px
    padding: 5px

.done
  &:before
    content: " ✓ "
    color: red

script.js

let item_template = "<li class='{{class}}'>{{num}}.{{name}}({{date}})</li>";
let data_url =
  "https://awiclass.monoame.com/api/command.php?type=get&name=tododata";
let tododata;

$.ajax({
  url: data_url,
  success: function (res) {
    tododata = JSON.parse(res);
    for (let i = 0; i < tododata.length; i++) {
      let item = tododata[i];
      let now_class = item.done === true ? "done" : "";
      let now_item = item_template
        .replace("{{name}}", item.name)
        .replace("{{num}}", i + 1)
        .replace("{{date}}", item.date)
        .replace("{{class}}", now_class);
      $("#listitem").append(now_item);
    }
  },
});

---

Please note

這個內容是來自吳哲宇老師的動畫互動網頁程式入門 (HTML/CSS/JS) 課程