ajax实现发表评论案例

案例效果如图

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) {
                rows.push('<li class="list-group-item"><span class="badge" style="background-color: rgb(67, 136, 113);">评论时间：' + item.time + '</span><span class="badge" style="background-color: rgb(138, 97, 46);">评论人：' + item.username + '</span> ' + item.content + '</li>')
            })
            $('#coms').empty().append(rows.join(''));
        }
    })
}
getCommentList();



$(function() {
    $('#formAddCmt').on('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();
        })
    })
})

在线演示

点击跳转

接口由黑马程序员提供