目录
[1 表单的同步提交](#1 表单的同步提交)
[2 Ajax监听表单提交事件 submit](#2 Ajax监听表单提交事件 submit)
[3 阻止表单的默认提交行为 e.preventDefault()](#3 阻止表单的默认提交行为 e.preventDefault())
[4 获取表单内的数据](#4 获取表单内的数据)
[4.1 字符串型 serialize()](#4.1 字符串型 serialize())
[4.2 数组包着对象型 serializeArray()](#4.2 数组包着对象型 serializeArray())
1 表单的同步提交
点击submit按钮的时候会将页面跳转到action的url，提交表单信息与跳转url是同步的，所以这个过程叫表单的同步提交
同步提交会有两个问题
- 提交后会跳转到新的页面
- 之前页面的状态会丢失
我们现在将第二个input的类型改为password
这个时候点击后退
发现你之前输入的password的内容就没有了
我们让表单只采集数据，Ajax发送数据，这样就不会发生页面的跳转，就会避免了上面两个问题
2 Ajax监听表单提交事件 submit
这两种方式都可以，我下面就用on做例子
html
js
发现可以触发submit事件
但是还是会跳转到action的url
3 阻止表单的默认提交行为 e.preventDefault()
调用事件对象的event.preventDefault()可以阻止表单的默认提交行为
html
js
使用.on或者.submit都是一样的，相同的事件对象，相同的方法
点击提交后还是这个页面，并且执行了该事件的函数
4 获取表单内的数据
4.1 字符串型 serialize()
可以通过val()这种方法拿到指定元素的数据，那种方法如果在表单中有多个信息就比较麻烦，我们可以使用serialize()一次获取表单提交的全部数据
- 使用$(selector)获取表单元素
- 表单中的每一个input需要有name属性，哪个没有哪个就获取不到
点击提交后会获得用户提交的数据，获取到的变量类型为字符串
点击提交后会获得用户提交的数据，获取到的变量类型为字符串
serialize()可以直接传入Ajax的data中，使用起来很方便，但是serialize()不方便校验
4.2 数组包着对象型 serializeArray()
serializeArray()同样可以直接传入Ajax的data，serializeArray()校验起来要方便一些