前面文章 :
前端串 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, '&').replace(/</g, '<').replace(/"/g, '"');
}
</script>
</body>
</html>
前端串 API 說明 :
因為是用 JS 來動態接收資料，所以其實也不用 PHP 檔，直接用 HTML 就好
var request = new XMLHttpRequest();
request.open('POST', 'api_comment.php', true);
複習 :
- XMLHttpRequest() 是瀏覽器提供的 class 使用 XMLHttpRequest MDN
- 網頁與伺服器的溝通
open() 就是你要發 request 到這個地方
第一個參數 : 用 GET 這個 method
第二個參數 : 發到 url
第三個參數 : 要不要非同步
用 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)
}
新增留言
- 對表單做監聽，
- 先阻止瀏覽器預設行為
e.preventDefault();， - 抓到使用者輸入的值
var content = document.querySelector('textarea[name=content]').value - 接著再
request.open('POST', 'api_add_comment.php', true); - 練習時把 data 寫死，
request.send("username=aa&content=" + encodeURIComponent(content)); - 上面記得要做編碼
encodeURIComponent(content) 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, '&').replace(/</g, '<').replace(/"/g, '"');
}
在顯示 content 的地方加 encodeHTML() <p class="card_content">${encodeHTML(comment.content)}</p>
這樣就完成了，幾乎可以取代 index.php 這個檔案
_@l841108lily_https://static.coderbridge.com/images/covers/default-post-cover-2.jpg)
