前端拿 API


Posted by tzutzu858 on 2020-10-27

前面文章 :

前端串 API ，用 XMLHttpRequest() 來拿資料

board/api_demo.html 全部程式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>留言板</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header class="warning">
    <strong>注意！本站為練習用網站，因教學用途刻意忽略資安的實作，註冊時請勿使用任何真實的帳號或密碼。</strong>
  </header>
  <main class="board">
      <h1 class="board__title">Comments</h1>
        <form class="board__new-comment-form">
          <textarea name="content" rows="5"></textarea>
          <input class="board__submit-btn" type="submit" /> 
        </form>
      <div class="board__hr"></div>
      <section>

      </section>
  </main>
  <script>
    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)
        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>
                <p class="card__content">${encodeHTML(comment.content)}</p>
            </div>
          `
          document.querySelector('section').appendChild(div)
        }
      }
    };
    request.send();

    var form = document.querySelector('.board__new-comment-form')
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      var content = document.querySelector('textarea[name=content]').value
      var request = new XMLHttpRequest();
      request.open('POST', 'api_add_comment.php', true);
      request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
      request.send("username=aa&content=" + encodeURIComponent(content));
      request.onload = function() {
        if (this.status >= 200 && this.status < 400) {
          var resp = this.response;
          var json = JSON.parse(resp)
          if (json.ok) {
            location.reload()
          } else {
            alert(json.message)
          }

        }
      }
    })

    function encodeHTML(s) {
        return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
    }
  </script>
</body>
</html>

前端串 API 說明 :

因為是用 JS 來動態接收資料，所以其實也不用 PHP 檔，直接用 HTML 就好

var request = new XMLHttpRequest();
      request.open('POST', 'api_comment.php', true);

複習 :

用 for 迴圈把所有留言印出來

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_avartar"></div>
            <div class="card_body">
                <div class="card_info">
                    <div class="card_author">
                        ${comment.nickname}(@${comment.username})
                    </div>
                  <span class="card_time">
                    ${comment.created_at}
                  </span>
                </div>
                <p class="card_content">${encodeHTML(comment.content)}</p>
            </div>
          `
          document.querySelector('section').appendChild(div)
        }

新增留言

  1. 對表單做監聽，
  2. 先阻止瀏覽器預設行為 e.preventDefault();，
  3. 抓到使用者輸入的值 var content = document.querySelector('textarea[name=content]').value
  4. 接著再 request.open('POST', 'api_add_comment.php', true);
  5. 練習時把 data 寫死，request.send("username=aa&content=" + encodeURIComponent(content));
  6. 上面記得要做編碼 encodeURIComponent(content)
  7. request.onload 看有沒有成功，如果成功重新整理頁面 location.reload() ，失敗就把訊息秀出來 alert(json.message)
    request.onload = function() {
     if (this.status >= 200 && this.status < 400) {
       var resp = this.response;
       var json = JSON.parse(resp)
       if (json.ok) {
         location.reload()
       } else {
         alert(json.message)
       }
     }
   }

記得要防 XSS

function encodeHTML(s) {
        return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
    }

在顯示 content 的地方加 encodeHTML() <p class="card_content">${encodeHTML(comment.content)}</p>

這樣就完成了，幾乎可以取代 index.php 這個檔案



tzutzu858




Related Posts

Vue.js 學習旅程Mile 5 – 模板語法之二：Directives 指令

Vue.js 學習旅程Mile 5 – 模板語法之二：Directives 指令

 yuhantaiwan
Python Web Flask 實戰開發教學 - 簡介與環境建置

Python Web Flask 實戰開發教學 - 簡介與環境建置

 KD Chang
[Web 開發] Chrome+Postman 複製頁面 API

[Web 開發] Chrome+Postman 複製頁面 API

 kitecloud213

Comments