目录
1表单的同步提交
2Ajax监听表单提交事件 submit
3阻止表单的默认提交行为 e.preventDefault()
4获取表单内的数据
4.1 字符串型serialize()
4.2数组包着对象型 serializeArray()
1表单的同步提交
点击submit按钮的时候会将页面跳转到action的url，提交表单信息与跳转url是同步的，所以这个过程叫表单的同步提交
同步提交会有两个问题
提交后会跳转到新的页面之前页面的状态会丢失
我们现在将第二个input的类型改为password
这个时候点击后退
发现你之前输入的password的内容就没有了
我们让表单只采集数据，Ajax发送数据，这样就不会发生页面的跳转，就会避免了上面两个问题
2Ajax监听表单提交事件 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()校验起来要方便一些
