4.提交表单数据

目录

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()校验起来要方便一些