<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="arttemplate/template-native.js"></script>
<script id="tem" type="text/html">
<!-- 將拿到的數據中 的comments變量 進行遍歷 -->
<% for(var i=0;i < comments.length;i ++){ %>
<!-- 在每個li中 添加一個自定義的標簽屬性，用來記錄自己的id -->
<li uid="<%= comments[i].id %>">
<p class="floor">
<%= comments[i].id %><a href="javascript:;" class="delete">刪除</a>
</p>
<p class="author">層主：<span class="name">
<%= comments[i].username %>
</span></p>
<p class="content">
<%= comments[i].content %>
</p>
</li>
<% } %>
</script>
</head>
<body>
<div class="main">
<div class="post">
<h2>新年快樂</h2>
<p class="author">樓主：<span>alian</span></p>
<p class="txt">新年快樂，萬事如意</p>
</div>
<hr>
<div class="reply">
<h4>發表回復</h4>
<p>用戶名：<input type="text" class="usename"></p>
<textarea class="contents"></textarea><br>
<input type="button" value="發表" class="btn">
</div>
<div class="cmst">
<ul class="list">
<!-- <li>
<p class="floor">1樓<a href="javascript:;" class="delete">刪除</a></p>
<p class="author">層主：<span class="name">哈哈哈</span></p>
<p class="content">happy new year!</p>
</li> -->
</ul>
</div>
</div>
<script>
//獲取元素
var $list = $(".cmst .list");
var $comment = $(".reply .contents");
var $user = $(".reply .usename");
var $btn = $(".reply .btn")
//獲取后台數據
getData();
//封裝函數
function getData(){
$.ajax({
url: "http://localhost:3000/db",
type: "GET",
success: function (data) {
// console.log(data);
//將得到的數據添加到模板
$list.html(template("tem", data));
//在這里可以正常獲取所有添加的元素
//需要獲取刪除按鈕，並添加點擊事件，刪除自己所在的li標簽
deleteData();
}
})
}
//增加一項新的數據到數據庫中
//添加點擊事件
$btn.click(function () {
var username = $user.val();
var content = $comment.val();
$.ajax({
url: "http://localhost:3000/comments",
type: "POST",
dataType: "json",
data: { username: username, content: content },
success: function (data) {
// $list.append(template("tem", { "comments": [data]}));
getData();
}
})
// 清空輸入
$user.val("");
$comment.val("");
})
//封裝刪除函數
function deleteData(){
// 定義 點擊按鈕刪除
$(".cmst .list .delete").click(function(){
// 要找到自己的祖先中的li標簽
$li = $(this).parents("li");
// 找到li標簽記錄在數據庫中的id
var index = $li.attr("uid");
// 發送請求
$.ajax({
url: " http://localhost:3000/comments/"+index,
type: "DELETE",
})
// 從DOM結構中刪除對應的li
$li.remove();
})
}
</script>
</body>
</html>
json文件里的所有數據
傳遞的數據:
