表单同步提交的缺点
<form>表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验很差。<form>表单同步提交后，页面之前的状态和数据会丢失。
解决方案：
表单只负责采集数据，Ajax负责将数据提交到服务器。
监听表单提交事情
在jQuery中，可以使用如下俩种方式，监听到表单的提交事件
方法一：
代码语言：javascript复制 $('#f1').submit(function (e) {
alert('监听到了表单的提交事件！')
})方法二：
代码语言：javascript复制 $('#f1').on('submit', function (e) {
alert('监听到了表单提交事件')
})阻止表单的默认提交行为
当监听到表单的提交事件后，可以调用事件对象的 event.preventDefault()函数，来阻止表单的提交和页面的跳转，示例代码如下：
$('#f1').submit(function (e) {
//阻止表单的提交和页面的跳转
e.preventDefault()
})
或
$('#f1').on('submit', function () {
//阻止表单的提交和页面的跳转
e.preventDefault()
})快速获取表单中的数据
1.serialize()函数
为了简化表单中数据的获取操作，jQuery提供了 serialize()函数，其语法格式如下：
$(selector).serialize()好处：可以一次性获取到表单中的所有数据。
2.serialize()函数示例
代码语言：javascript复制 <form id="f1">
<input type="text" name="user_name">
<input type="password" name="password">
<button type="submit">提交</button>
</form> $('#f1').submit(function (e) {
//阻止表单的提交和页面的跳转
e.preventDefault()
var data = $(this).serialize()
console.log(data);
//结果：username=用户名的值&password=密码的值
})注意：在使用 serialize()函数快速获取表单数据时，必须为每个表单元素添加name属性！
