第三章:form表单
2.1:form表单的基本使用
-
什么是表单
表单在网页中主要负责数据采集功能。HTML中的
<form>
标签,就是用于采集用户输入的信息,并且通过<form>
标签的提交操作,把采集到的信息提交到服务器端进行处理。 -
表单的组成部分
表单由三个基本部分组成:表单标签、表单域、表单按钮。
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
-
<form>
标签的属性<form>
标签用来采集数据,<form>
标签的属性则是用来规定如何把采集到的数据发送到服务器。属性 描述 action 规定当提交表单时,向何处发送表单数据 method 规定以何种方式把标签数据提交到 action URL
enctype 规定在发送表单数据之前如何对其进行编码 target 规定在何处打开 action URL
-
action
action
属性的值应该是后端提供的一个URL地址,这个URL地址专门负责接收表单提交过来的数据。当<form>
表单在未指定action
属性的情况下,action
的默认值为当前页面的URL地址。注意:当表单提交后,页面会立即跳转到
action
属性指定的URL地址。 -
target
它的可选值有5个,默认情况下,
target
的值是_self
,表示在相同的框架打开action URL
值 描述 _blank 在新窗口中打开 _self 默认,在相同的框架中打开 _parent 在父框架集中打开 _top 在整个窗口中打开 framename 在指定的框架中打开 -
method
它的可选值有两个,分别是
get
和post
。默认情况下,method
的值为get
,表示通过URL地址的形式,把表单数据提交到action URL
。注意:
get
方式适合用来提交少量的、简单的数据。post
方式适合用来提交大量的、复杂的、或包含文件上传的数据。实际开发更常用。
-
enctype
它的可选值有三个,默认情况下,
enctype
的值为application/x-www-form-urlencoded
,表示在发送前编码所有的字符。值 描述 application/x-www-form-urlencoded 在发送前编码所有字符(默认) multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。 text/plain 空格转换为"+"加号,但不对特殊字符编码。 注意:在涉及到文件上传的操作时,必须将
enctype
的值设置为multipart/form-data
。
-
-
表单的同步提交及缺点
-
什么是表单的同步提交
通过点击
submit
按钮,触发表单提交的操作,从而使页面跳转到action URL
的行为,叫做表单的同步提交。 -
表单同步提交的缺点
<form>
表单同步提交后,整个页面会发生跳转,跳转到action URL
所指向的地址,用户体验很差。<form>
表单同步提交后,页面之前的状态和数据会丢失。
解决方案:表单只负责采集数据,Ajax负责将数据提交到服务器。
-
2.2:通过Ajax提交表单数据
-
监听表单提交事件
在
jQuery
中,可以使用如下两种方式,监听到表单的提交方式。$('#f1').submit(function () { alert('监听到了表单的提交事件'); }) $('#f1').on('submit', function () { alert('监听到了表单的提交事件'); })
-
阻止表单默认提交行为
当监听到表单的提交事件以后,可以调用事件对象的
event.preventDefault()
函数,来阻止表单的提交的页面的跳转。$('#f1').submit(function (e) { e.preventDefault(); }); $('#f1').on('submit', function (e) { e.preventDefault(); })
-
快速获取表单中的数据
-
serialize()
函数:为了简化表单中数据的获取操作,jQuery
提供了serialize()
函数,其语法格式如下:$(selector).serialize()
好处:可以一次性获取到表单中的所有的数据。
注意:在使用
serialize()
函数快速获取表单表单数据时,必须为每个表单元素添加name属性。
-