Ajax中的＜form＞标签

<form>标签的属性

<form>标签用来采集数据,<form>标签的属性则是用来规定如何把数据发送到服务器

属性	值	描述
action	URL地址	规定提交表单时,向何处发送表单数据
method	get或post	规定以何种方式把表单的数据提交到action URL
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	回顶在发送表单数据之前如何对其进行编码
target	_blank _self _parent _top framename	规定在何处打开action URL

1.action

action属性用来规定当提交表单时,向何处发送表单数据

action属性的值应该是后端提供的一个URL地址,这个URL地址专门负责劫收表单提交过来的数据

当<form>表单在未指定action属性值的情况下,action的默认值为当前页面的URL地址

注意:当提交表单后,页面会立即跳转到action属性指定的URL地址

 

2.target

target属性用来规定在何处打开action URL

值	描述
_blank	在新窗口中打开
_self	默认,在相同的框架中打开
_parent	在父框架集中打开(少用)
_top	在整个窗口中打开(少用)
framename	在指定的框架中打开(少用)

 

3.method

method属性可以用来规定以何种方式把表单数据提交到action URL

他的可选值有两个,get和post

默认情况下,method的值为get,表示通过URL地址的形式,把表单数据提交到action URL

注意:get方式适合用来提交少量的,简单的数据;post方式适合用来提交大量的,复杂的,或包含文件上传的数据(安全性比get方式强)

在实际开发中,<form>表单的post提交方式用的最多,很少用get,例如登录,注册,添加数据等表单操作,都需要使用post方式来提交表单

 

4.enctype

enctype属性用来规定在发送表单数据之前如何对数据进行编码

他的可选值有三个,默认情况下,enctype的值为application/x-www-form-urlencoded,表示在发送前编码所有的字符

值	描述
application/x-www-form-urlencoded	在发送昂前编码所有字符(默认)
multipart/form-data	不对字符编码,在使用包含文件上传控件的表单时,必须使用该值
text/plain	空格转换为"+"加号,但不对特殊字符编码(少用)

注意:在涉及到文件上传的操作时,必须将enctype的值设置为multipart/form-data

如果表单的提交不涉及到文件上传操作,则直接将enctype的值设置为applicaiton/x-www-form-urlencoded即可

 

表单的同步提交及缺点

什么是表单的同步提交

通过点击submit按钮,触发表单提交的操作,从而使页面跳转到action URL的行为,叫做表单的同步提交

 

表单同步提交的缺点

1. <form>表单同步提交后,整个页面会发生跳转,跳转到action URL所指向的地址,用户体验很差
2. <form>表单同步提交后,页面之前的状态和数据会丢失

 

如何解决表单同步提交的缺点

解决方案: 表单只负责采集数据,Ajax负责将数据提交到服务器

只要页面不进行跳转,页面的数据就不会丢失(在后续有示例)