留言板、前端串接 API

用 AJAX 獲得資料放到頁面上。

將 index.php 代碼拿掉，現在 api_demo.php 長相如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HW8 留言板</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class='warning'>
        注意!本站為練習用網站，因教學用途刻意忽略資安的實作， 註冊時請勿使用任何真實的帳號或密碼。
    </div>
    <div class='content'>
      <div class='desc'>
        <h2 class='title'>Comments</h2>
        <h3 class='greeting__word'>你好 (＾ω＾)&emsp;</h3>
      </div>
      <form class='message'>
        <textarea name="content" id="message__box" rows="10"></textarea>
        <input type="submit" name="submit" class="submit__btn">
      <hr>
      </form>
      <section>
          <div class='card'>    
              <div class='card__img'></div>
              <div class='card__text'>
              <div class='card__text-title'>
                <span class='nickname'>小草莓</span>
                <span class='username'>strawberry_mini</span>
                <span class='date'>2021/07/01 09:37</span>
              </div>
              <div class='card__text-content'>草莓草莓我愛你</div>
           </div>
        </div>
      </section>
    </div>
</body>
</html>

拿資料，方式有很多種，透過 jQuery, this 等等的

        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)
        console.log(json)
            }
        }
        request.send()

用 div 的方式、innerHTML、appendChild 將資料渲染到畫面上

      var request = new XMLHttpRequest()
      request.open('GET', 'api_comments.php', true)
      request.onload = function () {
        if (this.status >= 200 && this.status <400) {
            var response = this.response
            var json = JSON.parse(response)
            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__img'></div>
              <div class='card__text'>
                <div class='card__text-title'>
                  <span class='nickname'>${comment.nickname}</span>
                  <span class='username'>${comment.usrname}</span>
                  <span class='date'>${comment.create_at}</span>
                </div>
                <div class='card__text-content'>${comment.content}</div>
              </div>
              `
              document.querySelector('section').appendChild(div)
            }
        }
      }
      request.send()

針對表單，攔截事件

        var form = document.querySelector('.message')
        form.addEventListener('submit', function(e) {
          e.preventDefault()
          var content = document.querySelector('textarea[name=content]').value
          var request = new XMLHttpRequest()
            request.open('POST', 'api_add_comments.php', true)
            request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')
            request.send("username=aa&content=" + 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)
                    }
                }
            }
        })

將 content 做編碼

 request.send("username=aa&content=" + encodeURIComponent(content));

因為兩個是共用同個資料庫，所以!!!!!也要留意 XSS 的問題。

差異點

content 是執行完 js 動態拉進來的。原本的 index.php 的 content 是後端處理完再丟回來的。
PHP 版本將 JS 關掉，內容還是會在，但這個版本將 JS 關掉內容就通通不見了。

留言板、前端串接 API

差異點

s103071049

Related Posts

Comments

差異點

s103071049

Related Posts

深入學習 lsd-slam - 3

為什麼需要 React / 思考模式的差異 / state vs props

[評價] 羅技鍵鼠組 MK240 NANO (K240+M212)

Comments