Ajax--form表单与模板引擎--通过Ajax提交表单数据及案例 - 评论列表

监听表单提交事件

在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件：

$('#form1').submit(function(e) {
   alert('监听到了表单的提交事件')
})
 
$('#form1').on('submit', function(e) {
   alert('监听到了表单的提交事件')
})

  阻止表单默认提交行为

就是点击表单之后，会默认跳转action对应的url 

当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下：

$('#form1').submit(function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})
 
$('#form1').on('submit', function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

 快速获取表单中的数据

1. serialize()函数

为了简化表单中数据的获取操作，jQuery 提供了 serialize() 函数，其语法格式如下：

$(selector).serialize()

serialize() 函数的好处：可以一次性获取到表单中的所有的数据。

2. serialize()函数示例

<form id="form1">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>

$('#form1').serialize()
// 调用的结果：
// username=用户名的值&password=密码的值

注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！

案例 - 评论列表

 

为什么会是反的，这是因为浮动的原因 

 外观搭建 

 获取评论列表

function getCmtList() {
    $.get('http://www.liulongbin.top:3006/api/cmtlist', function (res) {  
      if(res.status !== 200) {
        return alert('获取评论列表失败！')
      }
      var rows = []
      $.each(res.data, function (i, item) { // 循环拼接字符串
        rows.push('
'+ item.content +'评论时间：'+ item.time +'评论人：'+ item.username +'
')