基於jQuery Ajax的評論列表案例（含表單資料採集）
阿新 • • 發佈：2022-04-07
注：案例用到 bootstrap.css庫 和 jquery.js庫
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./lib/bootstrap.css" /> <script src="./lib/jquery.js"></script> <script src="./js/cmt.js"></script> </head> <body style="padding: 15px;"> <!-- 評論面板 --> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">發表評論</h3> </div> <form class="panel-body" id="formAddCmt"> <div>評論人：</div> <input type="text" class="form-control" name="username" autocomplete="off" /> <div>評論內容：</div> <textarea class="form-control" name="content"></textarea> <button type="submit" class="btn btn-primary">發表評論</button> </form> </div> <!-- 評論列表 --> <ul class="list-group" id="cmt-list"> <li class="list-group-item"> <span class="badge" style="background-color: #F0AD4E;">評論時間：</span> <span class="badge" style="background-color: #5BC0DE;">評論人：</span> Item 1 </li> </ul> </body> </html>
cmt.js:
function getCommentList() { $.ajax({ method: 'GET', url: 'http://www.liulongbin.top:3006/api/cmtlist', success: function (res) { if (res.status !== 200) return alert('獲取評論列表失敗！') var rows = [] $.each(res.data, function (i, item) { var str = '<li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">評論時間：' + item.time + '</span><span class="badge" style="background-color: #5BC0DE;">評論人：' + item.username + '</span>' + item.content + '</li>' rows.push(str) }) $('#cmt-list').empty().append(rows.join('')) } }) } getCommentList() $(function () { $('#formAddCmt').submit(function (e) { e.preventDefault() var data = $(this).serialize() $.post('http://www.liulongbin.top:3006/api/addcmt', data, function (res) { if (res.status !== 201) { return alert('發表評論失敗！') } getCommentList() $('#formAddCmt')[0].reset() }) }) })