參照資料、You might not need jQuery
用 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'>你好 (＾ω＾) </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 關掉內容就通通不見了。
