基于jQuery Ajax的评论列表案例（含表单数据采集）

注：案例用到 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>Documenttitle>
  <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 = '
  • 评论时间：' + item.time + '评论人：' + item.username + '' + item.content + '
    • '
        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()
    })
  })
})
    AJAX

    相关

    extjs ajax 同步 及 confirm 确认提示框问题

    Ajax

    Django 的简单ajax

    ajax提交出现500错误

    axios和ajax对响应是文件流用blob处理

    ajax轮询原理及其实现方式

    ajax

    ajax

    Ajax

    Ajax

    【JavaScript】填坑，表单提交不执行Ajax方法

    fetch和Ajax

    标签