自己寫 API

API 是甚麼

• Appicaiton Programming Interface
• 只是一個資料，拿到資料後再決定要怎麼顯示出來
• 想取得資料時，不須爬蟲，更以更方便取得
• 格式是 JSON，跟 JS 的物件很像

用 php 實作 API

1. 宣告陣列，把資料 push 進去

   $comments = array()
   array_push($comments, array(
   // key => value 
   "id" => 1,
   "username" => "aaa",
   "content" => "123"
   ))
   

2. 再宣告一個 array，把 comment 這個 array 放進去

   $json = array(
   "comments" => $comments
   )
   

3. 用 encode 把東西轉成 JSON 格式，後面加上 header 告訴瀏覽器是一個 JSON 的東西

   $response = $json_encode($json)
   header('Content-type：application/json;charset=utf-8');
   

4. response 是一個 JSON 的東西，裡面有 comments 這個 key，這個 key 底下存的是陣列

把資料庫的東西寫成 API

// 先取資料庫的東西
$result = get_result();

// 把資料放進 key-value
$comments = array();
while($row = $result->fetch_assoc()) {
    array_push($comments, array(
    "id" => $row['id'],
    "username" => $row['username'],
    "nickname" => $row['nickname'],
    "content" => $row['contnet'],
    "created_at" => $row['created_at']
  ));
}

$json = array(
    "comments" => $comments
)

// 轉成 JSON 格式，把最後結果印出
$response = $json_encode($json)
echo $response;

串接自己寫的 API

1. 拿到資料

   var request = new XMLHttpRequest();
   request.open('GET', 'api_comments.php', true);
   request.onload = function() {
    if (this.status > 200 && this.status <400) {
        var resp = this.response
        var json = JSON.parse(resp) // 把 JSON 字串轉成 JS 的物件
        var comments = json.comments
        ...
    }
   }
   request.send();
   

2. 用迴圈抓取每個項目，再把抓到的資料放到 template 裡面

   ...
   var comments = json.comments
   for (var i = 0; i < comments.length; i++) {
    var comment = comments[i]
    var div = document.createElement('div')
    div.classList.add('card');
    div.innerHTML = `
        <div class="card_avatar"></div>
        <div class="card_body">
            <div class="card_info">
                <span class="card_author">${comment.nickname}(@${comment.username})</span>
                <span class="card_time">${comment.created_at}</span>
                <div class="card_content">${encodeHTML(comment.content)}</div>
            </div>
        </div>
        `
    document.querySelector('section').appendChild(div);
   }
   

把新增的東西加到 API

1. 選到表單，阻止 submit 的預設事件
2. 抓到表單內的內容(content)
3. 設定一個 HttpRequest，用 post 把 request 發到 api_add_comment.php
4. 設定 RequestHeader、內容

   var form = document.querySelector('.new_comment_form');
   form.addEventListener('submit', function (e) {  
    e.preventDefault(); //阻止預設事件，先不把表單送出
    var content = document.querySelector('textarea[name=content]').value;
    //把 content 送到 api
    var request = new XMLHttpRequest();
    request.open('POST', 'api_add_comment.php', true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send("username=ggg&content=" + encodeURIComponent(content));
   

RESTful API

是一種規則
寫在網址上就可以看出這個 api 在做什麼

• GET /comments：所有留言 API
• POST /comments：新增留言
• GET /comments/:id： 單一留言
• DELETE /comments/:id： 刪除留言
• PATCH/PUT /comments/:id：修改留言
  (comments 可替換各種資料)

jQuery

• 是一個 JavaScript 的 Library，可以跨瀏覽器使用
• 可以跟 JS 混用
• $ = jQuery

開始使用 jQuery

在 jQuery 網站點選 Download，直接點選版本按右鍵複製連結網址，在 head 新增一個 script 把 jQuery 引入進來

<scrpit src="https://code.jquery.com/jquery-3.5.1.js"></script>

用 jQuery 發 request

1. 用 $.ajax() 發 request，用 .done()裡面放一個 callback function 拿結果

   $.ajax({
    method：'GET',
    url：'https://restcountries.eu/rest/v2/name/taiwan'
   }).done(function (data) {
    console.log(data)
   })