前后端交互 —— ajax之form表单02 + serialize()函数 + 清空表单$(‘#formAddCmt‘)[0].reset() + 模板引擎

1.什么是表单

表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。

表单的组成部分
表单标签
表单域
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮

2.<form>标签的属性

属性	值	描述
action	URL地址	规定当提交表单时，向何处发送表单数据 注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址
method	get或post	规定以何种方式把表单数据提交到 action URL
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在发送表单数据之前如何对其进行编码
target	_blank _self	规定在何处打开 action URL(新窗口，当前窗口)

target：默认情况下target 的值是 _self 表示在同一个页面打开；
        _blank 在新的窗口打开

method：默认情况下，method 的值为 get
get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。（比较隐秘，提高数据的安全性）
在实际开发中，<form> 表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。

enctype：默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符
在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data,其他情况不写，默认就行


<form action="/login" target="_blank" method="get" enctype="application/x-www-form-urlencoded">
    <input type="text" name="email_or_mobile" />
    <input type="password" name="password" />
    <input type="checkbox" name="remember_me" checked />
    <button type="submit">提交</button>
</form>

3.表单的同步提交及缺点+解决

如果使用表单提交数据，则会导致以下两个问题：
 页面会发生跳转
 页面之前的状态和数据会丢失

解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器


$(function () {
      // 第一种方式
      // $('#f1').submit(function () {
      //   alert('监听到了表单的提交事件')
      // })

      // 第二种方式  按钮可以绑定click事件，表单可以绑定submit事件
      $('#f1').on('submit', function () {  
        alert('监听到了表单的提交事件2')
        阻止表单的默认提交行为
        e.preventDefault()
      })
    })

4. serialize()函数 快速获取表单中的数据

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

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



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

 5.快速清空表单

$('#formAddCmt')[0].reset()
将JQ对象变成DOM对象，调用reset函数，重置表单