form表单+Ajax快速提交复杂数据

介绍

  当我们需要提交数据的项过多时，我们不断获取表单元素内的每一个值然后一个个传入data属性内是非常麻烦的，JQ封装了一个函数serialize()可以将form表单填写的数据通过字符串拼接的形式返回给我们

前提知识科普

$.post()

$(selector).serialize()

---

实现代码

$(function () {
  $('#formAddCmt').submit(function (e) {
    /* 阻止默认行为 */
    e.preventDefault()

    /* 获取表单元素然后调用序列化，它将返回一个键值对字符串 */
    var data = $(this).serialize()

    /* 在上传数据时data不止可以是字面量对象，也可以是键值对字符串 */
    $.post('http://www.liulongbin.top:3006/api/addcmt', data, function (res) {
      if (res.status !== 201) {
        return alert('发表评论失败！')
      }

      /* 自己写的刷新评论区理解函数，不用在意 */
      getCommentList()

      /* Jquery查询实际返回的是一个数组，而第一位就是查询到的DOM元素，通过原生reset方法清空表单内的数据 */
      $('#formAddCmt')[0].reset()
    })
  })
})

END

---