jQuery中form表单基本使用
师增
form表单基本使用
什么是表单
表单在网页中主要负责数据采集的功能，HTML中的form标签，主要用于采集用户输入的信息，并通过form标签的提交操作，把采集到的信息提交到服务器端进行处理
form表单的属性
表单的构成
表单由3部分构成
- 表单标签
- 表单域 （文本框，密码框，多行文本框，复选框，单选框，下拉选择框，文件上传）
- 表单按钮
form标签的属性
form标签用来采集数据，form标签的属性 就是用来规定 如何把采集到的数据发送到服务器
表单的属性
action URL地址(后端提供的，这个url地址专门负责接收表单提交过来的数据) 规定提交表单时，向何处发送表单数据
未指定action属性值的情况下，action的默认值未当前页面的url地址method get或post 规定以何种方式把表单数据提交到 action url
（get 通过url地址栏传递数据，传递的数量小 不安全
post 通过http协议传递 ，传输的数据量大，安全）enctype 规定在发送表单数据之前如何对其进行编码
application/x-www-form-urlencoded 在发送前编码所有的字符（默认）
multipart/form-data 不对字符编码，文件上传，使用该值
text/plain 空格转换未 + 加号，但不对特殊字符编码(很少用)
<form action="/login" method="get">
<input type="text" name="email" id="" />
<br />
<input type="password" name="password" />
<br />
<input type="checkbox" name="remember" checked />
<br />
<button type="submit">提交</button>
</form>
表单的同步提交
点击submit按钮，触发表单提交的操作，从而使页面跳转到action url的行为，叫做表单的同步提交
缺点
- form表单同步提交后，整个页面发生跳转，跳转到action url指向的地址，用户体验差
- form表单同步提交后，页面之前的状态和数据会丢失
解决
表单只负责采集数据，Ajax负责将数据提交到服务器
Ajax提交表单数据
监听表单提交事件
<body>
<form action="/login" id="f1">
<input type="text" name="username" />
<br />
<input type="password" name="password" />
<br />
<button type="submit">提交</button>
</form>
</body>
<script>
$(function () {
$('#f1').submit(function () {
alert('监听到表单的提交事件')
})
})
</script>
表单的默认行为
监听到表单提交事件之后，调用事件对象的event.preventDefault()阻止表单的提交和页面的跳转
$(function () {
$('#f1').submit(function (e) {
alert('监听到表单的提交事件')
// 阻止表单的提交和页面的跳转
e.preventDefault()
})
})
快速获取表单中的数据
jQuery提供了serialize()函数,可以一次性的获取到表单中的所有数据（必须为每个表单元素添加name属性）
$(selector).serialize()
<body>
<form action="/login" id="f1">
<input type="text" name="username" />
<br />
<input type="password" name="password" />
<br />
<button type="submit">提交</button>
</form>
</body>
<script>
$(function () {
$('#f1').submit(function (e) {
// alert('监听到表单的提交事件')
// 阻止表单的提交和页面的跳转
e.preventDefault()
var data = $(this).serialize()
console.log(data) //username=1111&password=2222
})
})
</script>
类似资料：