Ajax — 評論列表

<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>

注意：此處自行下載 bootstrap 文檔進行引入

  <link rel="stylesheet" href="./lib/bootstrap.css" />

注意：此處自行下載 jQuery 進行引入

  <script src="./lib/jquery.js"></script>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()})})
})function template(id, data) {var str = document.getElementById(id).innerHTMLvar pattern = /{{\s*([a-zA-Z]+)\s*}}/var pattResult = nullwhile (pattResult = pattern.exec(str)) {str = str.replace(pattResult[0], data[pattResult[1]])}return str
}

實現效果：

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/248070.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248070.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248070.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！