目录
1 表单的同步提交
2 Ajax监听表单提交事件 submit
3 阻止表单的默认提交行为 e.preventDefault()
4 获取表单内的数据
4.1 字符串型 serialize()
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()校验起来要方便一些